2010-07-22 12 views
8

मुझे jQuery के साथ एक चयन में विकल्प डालने के लिए एक क्रॉस-प्लेटफ़ॉर्म तरीका चाहिए। मुझे लगता है कि मैं पिछले कि IE6 कुछ नहीं करता है में याद करते हैं जब यह कहा जाता है:jQuery के साथ चयन में विकल्प डालने के लिए कैसे करें - क्रॉस-प्लेटफ़ॉर्म, यहां तक ​​कि आईई 6

<select id="myselect" size="1"> 
<option value=""></option> 
</select> 
<script type="text/javascript"> 
$('#myselect').append('<option value="test1">test1</option>'); 
$('#myselect').append('<option value="test2">test2</option>'); 
</script> 

मुझे लगता है कि मुझे याद है कि इसके बाद के संस्करण सभी ब्राउज़रों में काम किया फ़ायरफ़ॉक्स 2 + और IE7 +, लेकिन नहीं IE6 के रूप में भी। सही बात? यदि हां, तो कामकाज क्या है?

उत्तर

1

जावास्क्रिप्ट क्रॉस-प्लेटफ़ॉर्म, यहां तक ​​कि आईई 6 है।

कैसे यह ब्राउज़र और उपयोग F12 विकल्प का अन्वेषण IE6 खुला इंटरनेट में लग रहा है परीक्षण करने के लिए, और नए सही डिबग मेनू में पिछले बटन का चयन करें - अनुकरण - वहाँ आप देख सकते हैं कि यह कैसे IE6, IE7, IE8, IE9 में काम करता है, IE10 आदि यहाँ IE6 परीक्षण करने के लिए पूर्ण स्क्रीन उदाहरण: http://jsfiddle.net/3Qv6P/embedded/result/

देखें कैसे गतिशील रूप से राज्यों की सूची से बदल रहा है अगर मैं अमेरिका या कनाडा

उदाहरण चुनें: http://jsfiddle.net/3Qv6P/

<!DOCTYPE html> 
<html><head></head><body> 
<div >Country * <select id="countrysel" name="country" onchange="CountryChange(this)"> 
    <option value="">-</option> 
    <option value="38">Canada</option> 
    <option value="44">China</option> 
    <option value="178">Russia</option> 
    <option value="225">USA</option> 
    </select></div> 
    <div>State/Prov.*<select id="state" name="state" style="display: none;"><option value="">-</option></select> 
    <input id="state_other" type="text" name="province" value=""></div> 

<!-- JAVASCRIPT --> 
<script language="javascript"><!-- 
//<![CDATA[ 
    function CountryChange(id){ 
     id = id.value; 
     id = parseInt(id); 

     st=document.getElementById("state"); 
     sto=document.getElementById("state_other"); 

     st.style.display="inline"; 
     sto.style.display="none"; 
     st.options.length=0; 

     if (id == 38){ 

      var CanadaProvinces = {52:"Ontario", 53:"Quebec", 54:"British Columbia", 55:"Alberta", 56:"Manitoba", 57:"Saskatchewan", 58:"Nova Scotia", 59:"New Brunswick", 60:"Newfoundland and Labrador",61:"Prince Edward Island", 62:"Northwest Territories", 63:"Yukon", 64:"Nunavut"}; 
      for(var key in CanadaProvinces) 
      { 
       var opt = document.createElement('option'); 
       opt.value = key; 
       opt.innerHTML = CanadaProvinces[key]; 
       st.appendChild(opt); 
      } 
     } else if (id == 225){ 

      var UnitedStates = {1:"Alabama", 2:"Alaska", 3:"Arizona", 4:"Arkansas", 5:"California", 6:"Colorado", 7:"Connecticut", 8:"D.C.", 9:"Delaware", 10:"Florida",11:"Georgia",12:"Hawaii",13:"Idaho",14:"Illinois",15:"Indiana",16:"Iowa",51:"Kansas",17:"Kentucky",18:"Louisiana",19:"Maine",20:"Maryland",21:"Massachusetts",22:"Michigan",23:"Minnesota",24:"Mississippi",25:"Missouri",26:"Montana",27:"Nebraska",28:"Nevada",29:"New Hampshire",30:"New Jersey",31:"New Mexico",32:"New York",33:"North Carolina",34:"North Dakota",35:"Ohio",36:"Oklahoma",37:"Oregon",38:"Pennsylvania",39:"Rhode Island",40:"South Carolina",41:"South Dakota",42:"Tennessee",43:"Texas",44:"Utah",45:"Vermont",46:"Virginia",47:"Washington",48:"West Virginia",49:"Wisconsin",50:"Wyoming"}; 
      for(var key in UnitedStates) 
      { 
       var opt = document.createElement('option'); 
       opt.value = key; 
       opt.innerHTML = UnitedStates[key]; 
       st.appendChild(opt); 
      } 
     }else{ 
      st.style.display="none"; 
      sto.style.display="inline"; 
     } 
    }  

//]]> 
--></script> 
<!-- /JAVASCRIPT --> 
</body></html> 

उदाहरण: http://jsfiddle.net/3Qv6P/

8

सबसे पहले, आप अपने कोड के साथ डीओएम तैयार होने की प्रतीक्षा नहीं कर रहे हैं। जैसे

$(document).ready(function() { 

    $('#myselect').append('<option value="test1">test1</option>'); 
    $('#myselect').append('<option value="test2">test2</option>'); 

}); 

मैं IE6 संगतता के बारे में यकीन नहीं है, लेकिन आप .appendTo समारोह के बजाय की कोशिश कर सकते,:

$('<option value="Test3">Test 3</option>').appendTo("#myselect"); 

उदाहरण:

आप में अपने jQuery कोड लपेटकर किया जाना चाहिए

http://jsfiddle.net/W6L9d/

+0

फिर से, कोई भी IE6 में परीक्षण कर रहा है। मुझे पिछले साल याद आया कि आईई 6 में यह बग था। दुर्भाग्यवश मेरे पास अब परीक्षण करने के लिए आईई 6 वर्कस्टेशन नहीं है। – Volomike

+0

ठीक है। खैर मुझे लगता है कि यदि आप सामान्य रूप से आईई 6 संगतता के बारे में चिंतित हैं, तो आपको व्यक्तिगत रूप से परीक्षण करने का एक तरीका मिलना चाहिए। आईई 6 और 7 तरफ से एक तरफ स्थापित करने के तरीके हैं (उदाहरण के लिए http://tredosoft.com/Multiple_IE)। –

+0

मेरे पास उबंटू लिनक्स है जो मेरे विकास वर्कस्टेशन के रूप में है। मेरे पास विंडोज 2008 सर्वर परीक्षण संस्करण के लिए एक परीक्षण वीएम है जिसका उपयोग मैं अन्य सभी चीजों का परीक्षण करने के लिए करता हूं लेकिन आईई 6। ट्रेडोसॉफ्ट का समाधान उस पर काम नहीं करेगा। – Volomike