jquery का उपयोग कर चयन विकल्पों को कैसे हटाएं और बदलें?

Question

यहां थोड़ी मदद चाहिए। मेरे पास एक गतिशील रूप है जो उपयोगकर्ता को अपने सही पते का चयन करने में सक्षम बनाता है। मैंने क्या किया है मेरे पास 2 चयन बॉक्स हैं। एक राज्य है और दूसरा शहर है। उपयोगकर्ता अपने राज्यों को चुनने के बाद चयनित राज्यों के अनुसार ड्रॉपडाउन शहर विकल्प गतिशील रूप से बदल जाएगा। मेरी समस्या यह है कि, मैं इसे जोड़ रहा हूं। यही कारण है कि मुझे सही शहर बदलने में समस्या है। क्योंकि यह पिछले चयनित विकल्प मान प्रदर्शित करेगा। यह संलग्न और संलग्न रहता है। कोई विचार मैं इस पर कैसे काम कर सकता हूं? मेरा कोड यहाँ है।

$('#state').on('change',function(){  
    var state_code = $('#state').val();  
    var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>';  
    $.ajax({  
     type: 'POST', 
     url: city_url, 
     data: '', 
     dataType: 'json', 
     async: false, 
     success: function(i){  
      var select = $('#city');  
      for (var j = 0; j < i.length; j++){     
       console.log(i[j].name + "--" + i[j].id); 
       $("#city").append("<option value='" +i[j].name+ "'>" +i[j].name+ "</option>");  
      }  
     }  
    });  
}); 

यहाँ शहर के लिए चयन है:

<select id="city" name="city"> 
    <option value="">---Select City---</option> 
</select> 

Answer 1

सभी विकल्पों को निकालता है और फिर से अपना डिफ़ॉल्ट संलग्न कर देता है:

var select = $('#city'); 
select.empty().append('<option value="">---Select City---</option>'); 

http://api.jquery.com/empty/

Answer 2

पाश के लिए करने से पहले, इस कोड को जोड़ें।

$("#city option").each(function() { 
$(this).remove(); 
}); 

Working Fiddle

Answer 3

आप इस तरह यह करने के लिए जोड़कर पहले शहरों div स्पष्ट करना चाहिए:

success: function(i){ 

    var select = $('#city'); 

    select.empty(); 

    select.append("<option value=''>---Select City---</option>"); 

    for (var j = 0; j < i.length; j++){ 
      console.log(i[j].name + "--" + i[j].id); 
      $("#city").append("<option value='" +i[j].name+ "'>" +i[j].name+ "  </option>"); 
    } 

} 

Answer 4

है जैसे कि यह प्रयास करें,

success: function(i){ 
    var select = $('#city'); 
    // remove previous data and add default option 
    select.html('<option value="">---Select City---</option>'); 
    for (var j = 0; j < i.length; j++){ 
     console.log(i[j].name + "--" + i[j].id); 
     select.append("<option value='" +i[j].name+ "'>" +i[j].name+ "</option>"); 
    } 
} 

Answer 5

आप निम्न कर सकते हैं:

var selectbox = $('#city'); 
selectbox.empty(); 
var list = ''; 
for (var j = 0; j < i.length; j++){ 
     list += "<option value='" +i[j].name+ "'>" +i[j].name+ "</option>"; 
} 
selectbox.html(list); 

नोट: पाश में संलग्न विधि कॉल न करें और यह भी चयनकर्ताओं को कैश।

Answer 6

बस इसलिए कि मैं इस स्थिति में भाग गया - मैंने सोचा कि मैं उल्लेख करता हूं कि यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं- अपने चयन बॉक्स को सुंदर बनाने के लिए चयन करें (या अपने पारंपरिक एचटीएमएल चयन के लिए एक और समान जावास्क्रिप्ट दृश्य प्रतिस्थापन) तो आपको ताज़ा करने की आवश्यकता हो सकती है एक बार जब आप विकल्पों को दोबारा तैयार कर लेंगे। चयन-बूटस्ट्रैप के मामले में यह $(element).selectpicker('refresh') की बात है - उदाहरण में:

function changeSelectOptions(id, max) { 
    var selectbox = $(id); 
    selectbox.empty(); 
    var list = ''; 
    for (var j = 1; j < max; j++){ 
     list += "<option value='" +j+ "'>" +j+ "</option>"; 
    } 
    selectbox.html(list); 
    $(id).selectpicker('refresh'); 
}