डायनामिक रूप से

Question

ड्रॉपडाउनलिस्ट में डिफ़ॉल्ट चयनित मान को जावास्क्रिप्ट का उपयोग करके डिफ़ॉल्ट रूप से चयनित मूल्य कैसे बदलें?

मैं जावास्क्रिप्ट के लिए नया हूं और मैं ड्रॉपडाउन सूची में डिफ़ॉल्ट चयनित मान को बदलने पर अटक गया हूं। यहां मैं अपना डिफ़ॉल्ट चयनित मान "111" को नए मान में बदलना चाहता हूं। पाठ में प्रवेश करने के बाद इसे बदलना है जैसे मॉडेल में "एबीसी" और जब मैं "ओके" बटन दबाता हूं.अब इसे ड्रॉप बॉक्स से प्राप्त ड्रॉपडाउन सूची में डिफ़ॉल्ट चयनित ("abc") प्रदर्शित करना होगा जो मुझे टेक्स्ट बॉक्स से मिलता है मोडल का। और सूची में पुराने मान भी नहीं बदला है।

कोड स्निपेट:

<form> 
<select id="myList"> 
      <option>111</option> 
      <option>222</option> 
      <option>333</option> 
     </select> <br> 
     <br> 
</form> 
<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <input type="text" id="addtext" size="50" /><br> 
    Write & add text in the Dropdown list..</text> 
    <br><br> 
    <button id="okBtn">OK</button> 

    </div> 

</div> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 


// Get the button that add text in the dropdown 
var btn1 = document.getElementById("okBtn"); 


// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

btn1.onclick = function(){ 
    //var element = document.getElementById('addtext'); 
    var y = document.getElementById("addtext"); 
    var x = document.getElementById("myList"); 
    var option = document.createElement("option"); 
    option.text = y.value; 
    x.add(option, option.defaultSelected, x[0]); 



    modal.style.display = "none"; 

} 



// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

मुझे लगता है कि मैं

option.text = y.value; 
    x.add(option, option.defaultSelected, x[0]); 

Answer 1

में कुछ गलत किया था आप चयनित विकल्प के सूचकांक सेट करने के लिए HTMLSelectElement.selectedIndex संपत्ति का उपयोग कर सकते हैं।

यदि आप इसे 0 पर सेट करते हैं, तो यह पहला विकल्प का चयन करेगा।

आप HTMLSelectElement.add() का उपयोग कर select पर option जोड़ सकते हैं। ([, इससे पहले कि] आइटम)

collection.add;: सही सिंटैक्स (डॉक्स से) है

आइटम एक HTMLOptionElement या HTMLOptGroupElement

से पहले वैकल्पिक है और संग्रह का एक तत्व, या लंबी प्रकार, के एक सूचकांक आइटम आइटम का प्रतिनिधित्व करने से पहले डाला जाना चाहिए है। यदि यह पैरामीटर शून्य है (या अनुक्रमणिका मौजूद नहीं है), तो नया तत्व संग्रह के अंत में जोड़ा गया है।

आप तीन तर्कों का उपयोग कर रहे थे, दो के बजाय।

तो, एक संभव दृष्टिकोण है:

btn1.onclick = function(){ 
    /* ... */ 
    x.add(option, 0); //add as the first item, always 
    x.selectedIndex = 0; //select the first item 
    /* ... */ 

} 

कार्य डेमो: https://jsfiddle.net/mrlew/w1zqL0h9/

के रूप में कहा, यदि आप एक दूसरा तर्क के रूप में null गुजरती हैं, यह अंत करने के लिए अपने option संलग्न कर देगा। और आप इसे length-1selectedIndex पर जाकर चुन सकते हैं।

btn1.onclick = function(){ 
    /* ... */ 
    x.add(option, null); //add option to the end 
    x.selectedIndex = x.length-1; //select the last element 
    /* ... */ 

}