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




html-select (12)

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

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

$.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)
            );
        });
    }
});

मेरे पास ज्ञात मूल्यों के साथ एक ड्रॉप-डाउन सूची है। जो मैं करने की कोशिश कर रहा हूं वह ड्रॉप डाउन सूची को किसी विशेष मान पर सेट कर रहा है जिसे मैं जानता हूं कि 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 का अनुमान लगा रहा हूं) के साथ एक बग है, लेकिन यह बहुत परेशान है।


बस कोशिश करो

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

और साथ नहीं

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

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

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

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

$.clientID("_statusDDL")

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

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

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


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

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

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

$("#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);
    }
}

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

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

पुhew !!

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


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

पसंद

<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 में चुने गए आइटम 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 और अन्य जैसे वरिष्ठ प्रोग्रामर से इस पर टिप्पणियों की सराहना करता हूं


<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');

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

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

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

एएसपी.नेट jQuery के अंदर सही ढंग से नियंत्रण आईडी प्रस्तुत करेगा।


एक और विकल्प नियंत्रण पैरा क्लाइंट आईडी = "स्टेटिक" को .NET में सेट करना है और फिर आप सेट किए गए आईडी द्वारा JQuery में ऑब्जेक्ट तक पहुंच सकते हैं।


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

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

या

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

jQuery के दस्तावेज कहता है:

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

यह व्यवहार jQuery संस्करण 1.2 और बाद में है।

आप शायद यह चाहते हैं:

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

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

<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 में dataClsField , dataClsField के लिए एक खोज करें और इसे .prop() का उपयोग करके चुना गया है:

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

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

dataClsField.val(myValue);




html-select