JQuery के साथ ड्रॉप-डाउन सूची के चयनित मान को बदलें

Question

मेरे पास ज्ञात मूल्यों के साथ एक ड्रॉप-डाउन सूची है। मैं जो करने की कोशिश कर रहा हूं वह ड्रॉप डाउन सूची को एक विशेष मूल्य पर सेट करता है जो मुझे पता है कि jQuery का उपयोग करके मौजूद है । नियमित जावास्क्रिप्ट का उपयोग करते हुए , मैं कुछ ऐसा करूंगा:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

हालांकि, मुझे jQuery के साथ ऐसा करने की आवश्यकता है , क्योंकि मैं अपने चयनकर्ता (बेवकूफ ASP.NET क्लाइंट आईडी ...) के लिए एक सीएसएस वर्ग का उपयोग कर रहा हूं ।

यहाँ कुछ चीजें मैंने कोशिश की हैं:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

मैं इसे jQuery के साथ कैसे कर सकता हूं ?

---

अपडेट करें

जैसा कि यह पता चला है, मैं इसके साथ पहली बार सही था:

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

जब मैं ठीक ऊपर काम करता है तो यह चेतावनी देता है, लेकिन जब मैं अलर्ट को हटाता हूं और इसे पूरी गति से चलने देता हूं, तो मुझे त्रुटि मिलती है

चयनित संपत्ति सेट नहीं कर सका। अमान्य सूचकांक

मुझे यकीन नहीं है कि यह jQuery या इंटरनेट एक्सप्लोरर 6 (मैं इंटरनेट एक्सप्लोरर 6 का अनुमान लगा रहा हूं ) के साथ एक बग है , लेकिन यह बहुत कष्टप्रद है।

Comments

समस्या यहाँ IE6 के साथ एक मुद्दा रहा है। मैं चुनिंदा तत्व के लिए नए विकल्प तत्व बना रहा था और फिर उन नए बनाए गए विकल्प तत्वों में से एक को मान सेट करने का प्रयास कर रहा था। IE6 गलत तरीके से इंतजार करता है जब तक कि यह एक स्क्रिप्ट से नियंत्रण वापस प्राप्त नहीं कर लेता है वास्तव में DOM में नए तत्वों को बनाने के लिए इतनी प्रभावी रूप से क्या हो रहा है मैं ड्रॉप डाउन सूचियों को उन विकल्पों में सेट करने की कोशिश कर रहा था जो अभी तक मौजूद नहीं थे, भले ही उनके पास होना चाहिए।

— चरणो

आप शुद्ध जावास्क्रिप्ट का उपयोग कर सकते हैंdd1 = document.getElementsByClassName('classname here'); dd1.value = 2;

— user2144406

javascriptstutorial.com/blog/…

Answer 1

jQuery के प्रलेखन में कहा गया है:

[jQuery.val] चेक, या चयन , सभी रेडियो बटन, चेकबॉक्स और उन विकल्पों का चयन करें जो मूल्यों के सेट से मेल खाते हैं।

यह व्यवहार jQueryसंस्करणों 1.2और ऊपर में है।

आप सबसे अधिक यह चाहते हैं:

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

Comments

क्या यह काम selectछिपा हुआ ( display: none;) है? मैं इसे सही काम करने के लिए नहीं कर सकता ...

— Padel

इसने मुझे $('._statusDDL [value="2"]').attr('selected',true);धन्यवाद जैसे सामान लिखने से बचा लिया !

— तुलसी

@ नोट यदि चयनित मान प्राप्त करने के मामले में होगा। इस मामले में यह चयनित विकल्प को सेट करते हुए चयनित मूल्य, या अधिक सटीक रूप से सेट कर रहा है।

— जॉन पी

@ जेएल: आपको .change()ड्रॉपडाउन सूची के दृश्य में विकल्प को देखने की जरूरत है , अर्थात$('#myID').val(3).change();

— काई नैक

चेनिंग .change () को उत्तर में जोड़ा जाना चाहिए। मुझे लगा कि मैं इस समाधान के साथ पागल हो रहा हूं जब तक कि मैं टिप्पणियों के माध्यम से पढ़ता हूं तब तक काम नहीं करता।

— डेविड बॉउम

Answer 2

छिपे हुए फ़ील्ड के साथ आपको इस तरह का उपयोग करने की आवश्यकता है:

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

या

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

Comments

क्या आप बता सकते हैं कि आपको छिपे हुए खेतों के लिए परिवर्तन की घटना की आवश्यकता क्यों है?

— शमूएल

@ शमूएल: क्योंकि यदि आप jQuery के साथ किसी चयन का चयनित विकल्प बदलते हैं, तो परिवर्तन ट्रिगर नहीं होता है, इसलिए मैन्युअल ट्रिगर की आवश्यकता होती है।

— machineaddict

यदि आपको ड्रॉपबॉक्स के मूल्य को बदलने के बाद एक परिवर्तन ईवेंट आग की आवश्यकता है, तो आपको मान सेट करने के बाद परिवर्तन फ़ंक्शन को कॉल करने की आवश्यकता है।

— tver3305

मुझे विशेष रूप से आग लगने की घटना की आवश्यकता थी इसलिए यह मेरे लिए सबसे अधिक उपयोगी था

— रोहन

Answer 3

सिर्फ एक FYI करें, इसे पूरा करने के लिए आपको CSS कक्षाओं का उपयोग करने की आवश्यकता नहीं है।

आप क्लाइंट पर सही नियंत्रण नाम प्राप्त करने के लिए निम्नलिखित लाइन ऑफ कोड लिख सकते हैं:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET नियंत्रण ASP.NET को सही ढंग से jQuery के अंदर प्रस्तुत करेगा।

Comments

यह केवल तभी काम करता है जब आपकी जावास्क्रिप्ट .aspx या .ascx मार्कअप के अंदर होती है, न कि जब यह .js फ़ाइल में होती है जैसा कि यहाँ था। इसके अलावा, इस बात पर निर्भर करता है कि आपके एप्लिकेशन में आपके नियंत्रण कितने गहरे हैं (मेरे मामले में वे लगभग 10 स्तर गहरे थे) ClientID अविश्वसनीय रूप से लंबे समय तक प्राप्त कर सकता है और वास्तव में आपके जावास्क्रिप्ट के आकार में महत्वपूर्ण ब्लोट को जोड़ सकता है यदि बहुत उदारता से उपयोग किया जाता है। मैं अपने मार्कअप को यथासंभव छोटा रखने की कोशिश करता हूं, अगर मैं कर सकता हूं।

— फिराओह

@ y0mbo लेकिन अगर आप MVC में जाते हैं तो भी आपको अपने जावास्क्रिप्ट के लिए बाहरी .JS फ़ाइलों का उपयोग करना चाहिए ताकि ब्राउज़र और प्रॉक्सी सर्वर इसे प्रदर्शन के लिए कैश कर सकें।

— 7wp

@ रॉबर्टो - लेकिन MVC बेवकूफ नामकरण सम्मेलनों का उपयोग नहीं करता है जो asp.net वेबफॉर्म करता है ताकि आप आराम से बाहरी जेएस फ़ाइल में उन नियंत्रणों का संदर्भ ले सकें जिनकी आपको आवश्यकता है।

— लॉयडफिलिप्स

यदि आप OO- शैली की जावास्क्रिप्ट बनाते हैं तो आप अपने ग्राहक Ids को अपनी वस्तु के निर्माता के पास भेज सकते हैं। ऑब्जेक्ट कोड सभी एक बाहरी js फ़ाइल में समाहित है, लेकिन आप इसे अपने aspx कोड से त्वरित करते हैं।

— mikesigs

मैं जल्द ही ClientIDMode = "Static" को एस्प कंट्रोल पर सेट कर देता हूं ताकि आपको पता चल जाए कि आईडी आपके द्वारा निर्दिष्ट आईडी होगी। आपको सावधान रहना होगा यदि आप उस नियंत्रण को एक पुनरावर्तक में डाल रहे हैं। msdn.microsoft.com/en-us/library/…

— Shawson

Answer 4

बस के साथ प्रयास करें

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

और साथ नहीं

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

Answer 5

इन समाधानों से लगता है कि आपकी ड्रॉप डाउन सूचियों के प्रत्येक आइटम की वैल्यू () वैल्यू ड्रॉप डाउन सूची में उनकी स्थिति से संबंधित है।

यदि यह मामला नहीं है तो चीजें थोड़ी अधिक जटिल हैं।

ड्रॉप डाउन सूची के चयनित सूचकांक को पढ़ने के लिए, आप इसका उपयोग करेंगे:

$("#dropDownList").prop("selectedIndex");

ड्रॉप डाउन सूची के चयनित सूचकांक को सेट करने के लिए, आप इसका उपयोग करेंगे:

$("#dropDownList").prop("selectedIndex", 1);

ध्यान दें कि प्रोप () सुविधा को JQuery v1.6 या बाद के संस्करण की आवश्यकता है।

आइए देखें कि आप इन दो कार्यों का उपयोग कैसे करेंगे।

मान लीजिए कि आपके पास महीने के नामों की एक ड्रॉप डाउन सूची थी।

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

आप "पिछला महीना" और "अगला महीना" बटन जोड़ सकते हैं, जो वर्तमान में चयनित ड्रॉप डाउन सूची आइटम को देखता है, और इसे पिछले / अगले महीने में बदल देता है:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

और यहां जावास्क्रिप्ट है जो ये बटन चलाएंगे:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

JSON डेटा के साथ ड्रॉप डाउन सूची को पॉप्युलेट करने के तरीके दिखाने के लिए निम्न साइट भी उपयोगी है:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

काहे !!

उम्मीद है की यह मदद करेगा।

Answer 6

कुछ समाधानों को देखने के बाद, इसने मेरे लिए काम किया।

मेरे पास कुछ मूल्यों के साथ एक ड्रॉप-डाउन सूची है और मैं एक और ड्रॉप-डाउन सूची से समान मूल्य का चयन करना चाहता हूं ... इसलिए पहले मैंने selectIndexअपने पहले ड्रॉप-डाउन के एक चर में डाल दिया ।

var indiceDatos = $('#myidddl')[0].selectedIndex;

फिर, मैं अपनी दूसरी ड्रॉप-डाउन सूची में उस सूचकांक का चयन करता हूं।

$('#myidddl2')[0].selectedIndex = indiceDatos;

ध्यान दें:

मुझे लगता है कि यह सबसे छोटा, विश्वसनीय, सामान्य और सुरुचिपूर्ण समाधान है।

क्योंकि मेरे मामले में, मैं मूल्य विशेषता के बजाय चयनित विकल्प के डेटा विशेषता का उपयोग कर रहा हूं। इसलिए यदि आपके पास प्रत्येक विकल्प के लिए अद्वितीय मूल्य नहीं है, तो उपरोक्त विधि सबसे छोटी और प्यारी है !!

Comments

यह सही उत्तर है, और हर कोई जो 'सिलेक्टेड इंडेक्स' तुरंत नहीं कहता था, उसे बेहतर पता होना चाहिए। हुर्रे डोम एपीआई और जिन लोगों ने इसे वापस लिखा है, वे पाषाण युग में हैं।

— vsync

Answer 7

मुझे पता है कि यह एक पुराना सवाल है और उपरोक्त समाधान कुछ मामलों को छोड़कर ठीक काम करता है।

पसंद

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

इसलिए आइटम 4 ब्राउज़र में "चयनित" के रूप में दिखाई देगा और अब आप मान को 3 के रूप में बदलना चाहते हैं और ऊपर दिए गए समाधानों के अनुसार, आइटम 4 के बजाय "आइटम 3" का चयन करें, यदि आप उपयोग करते हैं

jQuery("#select_selector").val(3);

आप उस आइटम 3 को ब्राउज़र में चयनित के रूप में देखेंगे। लेकिन जब आप डेटा को php या asp में संसाधित करते हैं, तो आपको चयनित मान "4" के रूप में मिलेगा। इसका कारण यह है, आपका html इस तरह दिखाई देगा।

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

और इसे गंभीर भाषा में "4" के रूप में अंतिम मान मिलता है।

इस क्षेत्र पर मेरा अंतिम समाधान

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

संपादित करें : "+ newselectedIndex +" के आसपास एकल उद्धरण जोड़ें ताकि गैर-संख्यात्मक मूल्यों के लिए समान कार्यक्षमता का उपयोग किया जा सके।

तो मैं वास्तव में क्या कर रहा हूं, चयनित विशेषता को हटा दिया और फिर नए को चयनित के रूप में बनाएं।

मैं वरिष्ठ प्रोग्रामर जैसे @strager, @ y0mbo, @ISIK और अन्य की टिप्पणियों की सराहना करूँगा

Answer 8

यदि हमारे पास "डेटा वर्गीकरण" के शीर्षक के साथ ड्रॉपडाउन है:

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

हम इसे एक चर में प्राप्त कर सकते हैं:

var dataClsField = $('select[title="Data Classification"]');

फिर दूसरे चर में उस मूल्य को डालें जिसे हम चाहते हैं:

var myValue = "Top Secret";  // this would have been "2" in your example

फिर हम उस क्षेत्र का उपयोग कर सकते हैं जिसे हम डालते हैं dataClsField, इसके लिए एक खोज करें myValueऔर इसका उपयोग करके चयनित करें .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

या, आप बस उपयोग कर सकते हैं .val(), लेकिन आपके चयनकर्ता का .उपयोग केवल तभी किया जा सकता है यदि यह ड्रॉपडाउन पर एक वर्ग से मेल खाता है, और आपको कोष्ठक के अंदर मूल्य पर उद्धरणों का उपयोग करना चाहिए, या हम पहले सेट किए गए चर का उपयोग करें:

dataClsField.val(myValue);

Answer 9

इसलिए मैंने इसे बदल दिया ताकि अब यह 300 बार मिलिसेकंड के बाद सेटटाइमआउट का उपयोग करे। अब काम करने लगता है।

मैं एक Ajax कॉल से डेटा लोड करते समय कई बार इस में चला गया। मैं भी .NET का उपयोग करता हूं, और jQuery चयनकर्ता का उपयोग करते समय क्लाइंटआईड को समायोजित करने में समय लगता है। जो समस्या आपको हो रही है उसे ठीक करने के लिए और setTimeoutप्रॉपर्टी जोड़ने से बचने के लिए , आप बस async: falseअजाक्स कॉल में " " डाल सकते हैं, और यह DOM को ऑब्जेक्ट्स को वापस करने के लिए पर्याप्त समय देगा जो आप चयन में जोड़ रहे हैं। नीचे एक छोटा सा नमूना:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

Answer 10

बस एक नोट - मैं jQuery में वाइल्डकार्ड चयनकर्ताओं का उपयोग कर रहा हूं जो ASP.NET CLIRE आईडी द्वारा बाधित वस्तुओं को हथियाने के लिए है - इससे आपको भी मदद मिल सकती है:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

आईडी पर ध्यान दें * वाइल्डकार्ड- यह आपके तत्व को ढूंढेगा भले ही नाम "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown" हो

Answer 11

मैं क्लाइंट आईडी प्राप्त करने के लिए एक विस्तार फ़ंक्शन का उपयोग करता हूं, जैसे:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

तो आप इस तरह jQuery में ASP.NET नियंत्रण कॉल कर सकते हैं:

$.clientID("_statusDDL")

Answer 12

एक अन्य विकल्प यह है कि कंट्रोल परम क्लाइंटआईडी = "स्टेटिक" इन नेट को सेट किया जाए और फिर आप जिस आईडी को सेट करते हैं उससे आप JQuery में ऑब्जेक्ट को एक्सेस कर सकते हैं।

Answer 13

<asp:DropDownList id="MyDropDown" runat="server" />

का उपयोग करें $("select[name$='MyDropDown']").val()।

Comments

यदि आप नाम पर मिलान कर रहे हैं, $तो आप इसे हटा सकते हैं, इसलिए यह एक पूर्ण मिलान है, न कि 'के साथ समाप्त'। लेकिन आपका सुझाव शायद केवल क्लास के नाम पर मिलान करने से अधिक तेज़ है। हालांकि यहां तक कि तेजी से हो सकता है element.classnameया #idname।

— एलेक

Answer 14

आप ड्रॉप डाउन सूची में मूल्यों को कैसे लोड कर रहे हैं या किस मूल्य का चयन करें? यदि आप अजाक्स का उपयोग कर रहे हैं, तो इसका कारण आपको चयन से पहले विलंब की आवश्यकता है क्योंकि हो सकता है कि मान उस समय लोड नहीं किए गए थे जिस पंक्ति में प्रश्न निष्पादित किया गया था। यह भी समझाता है कि जब आपने स्थिति निर्धारित करने से पहले लाइन पर एक अलर्ट स्टेटमेंट डाला तो यह काम क्यों करता है क्योंकि अलर्ट एक्शन डेटा को लोड करने के लिए पर्याप्त देरी देगा।

यदि आप jQuery के अजाक्स विधियों में से एक का उपयोग कर रहे हैं, तो आप कॉलबैक फ़ंक्शन निर्दिष्ट कर सकते हैं और फिर $("._statusDDL").val(2);अपने कॉलबैक फ़ंक्शन में डाल सकते हैं ।

यह समस्या से निपटने का एक अधिक विश्वसनीय तरीका होगा क्योंकि आप यह सुनिश्चित कर सकते हैं कि डेटा तैयार होने पर निष्पादित विधि, भले ही 300 एमएस से अधिक समय हो।

Answer 15

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "स्थिर"

$('#DropUserType').val('1');

Answer 16

मेरे मामले में मैं .attr () पद्धति का उपयोग कर इसे प्राप्त करने में सक्षम था।

$("._statusDDL").attr("selected", "");