मैं jQuery का उपयोग करके ड्रॉपडाउनलिस्ट का मान कैसे सेट कर सकता हूं?

Question

जैसा कि प्रश्न कहता है, मैं jQuery का उपयोग करके ड्रॉपडाउनलिस्ट नियंत्रण का मूल्य कैसे निर्धारित करूं?

Answer 1

$("#mydropdownlist").val("thevalue");

बस सुनिश्चित करें कि विकल्प टैग में मान वैल्यू विधि में वैल्यू से मेल खाता है।

Comments

मेरे पास ड्रॉप डाउन सूची के खिलाफ एक सीमा सत्यापनकर्ता है और मैं ड्रॉप डाउन सूची के मूल्य को निर्धारित कर रहा हूं जैसा कि आपने ऊपर वर्णित किया है, फिर भी श्रेणी सत्यापनकर्ता मुझे एक मूल्य (जब मूल्य चयनित सीमा के भीतर है) का चयन करने में विफल रहता है। कृपया मेरा प्रश्न देखें stackoverflow.com/questions/3165033/…

— जेम्स

यह "परिवर्तन" इवेंट को फायर नहीं करता है।

— AGamePlayer

दोहराना चाहते थे - सुनिश्चित करें कि आपके पास "मान" विशेषता सेट है, या यह विधि काम नहीं करेगी। (मैं किसी ऐसे व्यक्ति की मदद कर रहा था जिसने मुझे यह दिखाया और सोच रहा था कि यह ड्रॉपडाउन सूची में पाठ के माध्यम से चयन क्यों नहीं कर रहा था।) यह स्पष्ट करना चाहता था।

— जसकव

+1 $("#mycontrolId").selectmenu('refresh');को परिवर्तनों को प्रतिबिंबित करने के लिए कॉल करना पड़ा

— व्लाद नोव

इस लिंक पर विस्तृत जानकारी htmlgoodies.com/beyond/javascript/…

— Niamath

Answer 2

यदि आप इंडेक्स के साथ काम कर रहे हैं, तो आप सीधे .attr () के साथ चयनित इंडेक्स सेट कर सकते हैं:

$("#mydropdownlist").attr('selectedIndex', 0);

यह इसे ड्रापलिस्ट में पहले मूल्य पर सेट करेगा।

संपादित करें: जिस तरह से मैंने इसे ऊपर किया था वह काम करता था। लेकिन ऐसा लगता है कि यह अब नहीं है।

लेकिन जैसा कि हान टिप्पणियों में बताते हैं, ऐसा करने का सही तरीका है:

$("#mydropdownlist").get(0).selectedIndex = index_here;

Comments

अब, यह बिल्कुल काम नहीं करता है क्योंकि selectटैग में कोई विशेषता नाम नहीं है selectedIndex। यह इसके बजाय DOM ऑब्जेक्ट का गुण है। इसलिए कोड होना चाहिए:$("#mydropdownlist").get(0).selectedIndex = index_here;

— हान

$("#mydropdownlist").prop('selectedIndex', index_here); भी काम करता है।

— numthth

("#mydropdownlist")। get (0) .selectedIndex = index_here; यह तरीका काम कर रहा था !! @

— कासिम

ड्रॉपडाउन में चयनित बदलाव का शानदार तरीका, धन्यवाद

— Avtandil Kavrelishvili

क्या मुझे जवाब में कुछ निष्क्रिय आक्रामकता महसूस होती है

— धीरज

Answer 3

जैसा कि @Nick Berardi द्वारा सुझाया गया है, यदि आपका परिवर्तित मान UI फ़्रंट एंड पर प्रतिबिंबित नहीं होता है, तो प्रयास करें:

$("#mydropdownlist").val("thevalue").change();

Comments

बहुत बहुत धन्यवाद, बस एक लाइन, साफ-सुथरा और मददगार भी परिवर्तन को बढ़ाने के लिए () jQuery और लारवेल फॉर्म्स का उपयोग करके एक चयन बॉक्स का।

— व्हाट्सएप रहस्यमय

यह एकमात्र उत्तर है जहां परिवर्तन वास्तव में ड्रॉपडाउन में दिखाई दिया। selectmenujQuery के मेरे संस्करण में अपरिभाषित है, लेकिन change()चाल है।

— चाड हेडगॉक

धन्यवाद। यह मेरे लिए काम करने का एकमात्र तरीका था (इसके बाद बाकी सब कुछ करने की कोशिश के बाद)।

— प्रेरित

Answer 4

इस बहुत ही सरल दृष्टिकोण का प्रयास करें:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");

Comments

कॉल करना न भूलें$("#mycontrolId").selectmenu('refresh');

— व्लाद नोव

@VladL तो आपका मतलब है $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?

— डायलन क्जेन्स्की

Answer 5

यदि आपका ड्रॉपडाउन Asp.Net ड्रॉप डाउन है तो नीचे दिया गया कोड ठीक काम करेगा,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

लेकिन अगर आपका ड्रॉपडाउन HTML ड्रॉप डाउन है तो यह कोड काम करेगा।

 $("#DropDownName")[0].selectedIndex=0;

Answer 6

प्रश्न के लिए सर्वश्रेष्ठ उत्तर:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

उदाहरण के लिए:

$("#CityID").val(20).trigger("chosen:updated");

या

$("#CityID").val("chicago").trigger("chosen:updated");

Answer 7

मान सेट करें और ड्रॉपडाउन सूची घटना अपडेट करें

$("#id").val("1234").change();

Answer 8

इसे करने के कई तरीके हैं। ये उनमे से कुछ है:

$("._statusDDL").val('2');

या

$('select').prop('selectedIndex', 3);

Comments

आपका प्रोफ़ाइल इंगित करता है कि आप उस लिंक से जुड़े हैं जिसे आपने यहाँ शामिल किया था। अपनी पोस्ट में उस संबद्धता का खुलासा किए बिना स्टैक एक्सचेंज / स्टैक ओवरफ्लो पर स्पैम माना जाता है। देखें: क्या "अच्छा" आत्म प्रचार को दर्शाता है? , आत्म-प्रचार के बारे में कुछ सुझाव और सलाह , स्टैक ओवरफ्लो के लिए "स्पैम" की सटीक परिभाषा क्या है? , और क्या कुछ स्पैम बनाता है ।

— मकेन

Answer 9

मुझे लगता है कि इससे मदद मिल सकती है:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

यदि आप इस तरह से करते हैं, तो आप बिना टेक्स्ट वाले तत्व को जोड़ते हैं। इसलिए, जब आप डी कॉम्बो पर क्लिक करते हैं, तो यह प्रकट नहीं होता है, लेकिन मूल्य -1 को आपने बाद में $ ("autoCompleteDepbox") के साथ जोड़ा। वैल (-1); यदि कॉम्बो का वैध मूल्य है, तो आपको नियंत्रित करने दें।

आशा है कि यह किसी की मदद करता है।

मेरी अंग्रेजी के लिए खेद है।

Answer 10

यदि आपको बस एक ड्रॉपडाउन का मूल्य निर्धारित करने की आवश्यकता है तो सबसे अच्छा तरीका है

$("#ID").val("2");

यदि आपको ड्रॉपडाउन मान को अपडेट करने के बाद किसी स्क्रिप्ट को ट्रिगर करना है जैसे कि यदि आप ड्रॉपडाउन पर कोई भी ऑनक्रास इवेंट सेट करते हैं और आप ड्रॉपडाउन के अपडेट के बाद इसे चलाना चाहते हैं तो आपको इस तरह से उपयोग करने की आवश्यकता है

$("#ID").val("2").change();

Answer 11

चयनित विकल्प को जल्दी से सेट करने के लिए यहां एक फ़ंक्शन दिया गया है:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

इस फ़ंक्शन को तर्क तत्व आईडी और चयनित मान के साथ कॉल करें; इस तरह:

SetSelected('selectID','some option');

यह उपयोगी है जब सेट करने के लिए बहुत सारे विकल्प हों।

Answer 12

मामले में जब आप सभी <options ....></options>को अजाक्स कॉल द्वारा लोड
करते हैं तो ऐसा करने के लिए इन चरणों का पालन करें।

1)।
Ex के लिए ड्रॉप-डाउन के सेट मान के लिए एक अलग विधि बनाएँ :

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2)। इस पद्धति को कॉल करें जब अजाक्स कॉल सफलता सभी HTML परिशिष्ट कार्य पूरा करें

पूर्व के लिए:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

Answer 13

drop-down selectedमान सेट करें और परिवर्तन अपडेट करें

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

यहां हमने पहले से मूल्य निर्धारित किया Modelऔर चुना पर इसे अपडेट किया

Answer 14

// ड्रॉपडैम सूची का एचटीएमएल प्रारूप।

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// यदि आप जावास्क्रिप्ट का उपयोग करके चयनित आइटम को test2 में बदलना चाहते हैं। इसको आजमाओ। // सेट करें अगला विकल्प यू का चयन करना चाहते हैं

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

Answer 15

ऊपर हाइलाइटेड / चेक किए गए उत्तर का उपयोग करना मेरे लिए काम किया ... यहाँ थोड़ी अंतर्दृष्टि है। मैंने URL प्राप्त करने में थोड़ा धोखा दिया, लेकिन मूल रूप से मैं जावास्क्रिप्ट में URL को परिभाषित कर रहा हूं, और फिर इसे ऊपर से jquery उत्तर के माध्यम से सेट कर रहा हूं:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

Answer 16

बूटस्ट्रैप का उपयोग करने वाले लोगों के लिए, $(#elementId').selectpicker('val','elementValue')इसके बजाय का उपयोग करें $('#elementId').val('elementValue'), क्योंकि बाद वाला UI में मूल्य को अपडेट नहीं करता है।

नोट : यहां तक ​​कि .change()फ़ंक्शन भी काम करता है, जैसा कि कुछ उत्तरों में ऊपर बताया गया है, लेकिन यह $('#elementId').change(function(){ //do something })फ़ंक्शन को ट्रिगर करता है।

भविष्य में इस धागे को संदर्भित करने वाले लोगों के लिए बस इसे पोस्ट करना।