विकल्प का चयन एचटीएमएल वेब पेज

Question

में 'चयनित' संपत्ति को अपडेट नहीं किया गया है, कृपया बताएं कि मैं विकल्प की 'चयनित' संपत्ति कैसे बदल सकता हूं? उदा .:

<select id="lang_select"> 
    <option value="en" selected="selected">english</option> 
    <option value="ar">العربية</option> 
    <option value="az">azərbaycanlı</option> 
    <option value="bg">български</option> 
    <option value="ca">català</option> 
    <option value="cs">český</option> 
    <!-- some data cut --> 
</select> 

तो, अगर मैं डाउन सूची मूल्य कुछ भी नहीं ड्रॉप बदल एचटीएमएल-डेटा में बदल जाता है। क्यों?

केवल अगर मैं jQuery का उपयोग करके संपत्ति को पुनः लोड करने का प्रयास करता हूं तो यह काम करता है।

$(document).on('change',"select",function(){ 
    var i = $(this)[0].selectedIndex; 
    var ch = $(this).children().each(function(index){ 
     $(this).prop('selected',index == i); 
     if (index == i) { 
      $(this).attr('selected','selected'); 
     } else { 
      $(this).removeAttr('selected'); 
     } 
    }); 
}); 

क्यों? इससे कैसे बचा जा सकता है? क्या शुद्ध एचटीएमएल का उपयोग करके "चयनित" बदलना संभव है?

संपादित मैं अर्थात् html टैग में इस attrbute चाहते हैं, क्योंकि मैं बचाने के लिए और भविष्य में इस एचटीएमएल-कोड का हिस्सा बहाल करने के लिए की जरूरत है।

Answer 1

Updated का मूल्य बदल, के लिए .prop("selected", true)

नोट .attr("selected", true) एवजी, selected विशेषता का मान देता है true या false,नहीं।

कोशिश चयनकर्ता $("option[value=" + this.value + "]", this), सेट संपत्ति selected उपयोग true, .siblings() को option से selected विशेषता को दूर करने के

$(document).on("change","select",function(){ 
 
    $("option[value=" + this.value + "]", this) 
 
    .attr("selected", true).siblings() 
 
    .removeAttr("selected") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="lang_select"> 
 
<option value="en" selected="true">english</option> 
 
<option value="ar">العربية</option> 
 
<option value="az">azərbaycanlı</option> 
 
<option value="bg">български</option> 
 
<option value="ca">català</option> 
 
<option value="cs">český</option> 
 
<!-- some data cut --> 
 

 
</select>

Answer 2

val() विधि का उपयोग करें। तो आपके मामले में, $("#lang_select").val('en'); अंग्रेजी विकल्प का चयन करता है। और वैसे यदि आप पहले विकल्प का चयन करना चाहते हैं तो आपको selected="selected" की आवश्यकता नहीं है। डिफ़ॉल्ट रूप से पहला विकल्प स्वचालित रूप से चुना जाता है।

Answer 3

यह html बदल नहीं है ही, लेकिन यह डीओई की select

$('select').change(function(){ 
 
    $('#result').html($(this).val()); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="lang_select"> 
 
    <option value="en" selected="selected">english</option> 
 
    <option value="ar">العربية</option> 
 
    <option value="az">azərbaycanlı</option> 
 
    <option value="bg">български</option> 
 
    <option value="ca">català</option> 
 
    <option value="cs">český</option> 
 
    <!-- some data cut --> 
 
</select> 
 
<hr /> 
 
<div id="result"></div>