JQuery में सेलेक्ट एलिमेंट में आप किसी विशेष विकल्प का चयन कैसे करते हैं?

Question

यदि आप इंडेक्स, वैल्यू या टेक्स्ट जानते हैं। अगर आपके पास डायरेक्ट रेफरेंस के लिए आईडी नहीं है।

यह , यह और यह सभी सहायक उत्तर हैं।

उदाहरण मार्कअप

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

Comments

$("#my_select").val("the_new_value").change();... ... इतने से

— dsdsdsdsd

Answer 1

मूल्य द्वारा मध्य विकल्प-तत्व प्राप्त करने के लिए एक चयनकर्ता है

$('.selDiv option[value="SEL1"]')

एक सूचकांक के लिए:

$('.selDiv option:eq(1)')

एक ज्ञात पाठ के लिए:

$('.selDiv option:contains("Selection 1")')

EDIT : ओपी के ऊपर टिप्पणी के रूप में ड्रॉपडाउन के चयनित आइटम को बदलने के बाद हो सकता है। संस्करण 1.6 और उच्चतर प्रोप () विधि की सिफारिश की गई है:

$('.selDiv option:eq(1)').prop('selected', true)

पुराने संस्करणों में:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : रयान की टिप्पणी के बाद। "चयन 10" पर एक मैच अवांछित हो सकता है। मुझे पूर्ण पाठ से मिलान करने के लिए कोई चयनकर्ता नहीं मिला , लेकिन एक फ़िल्टर काम करता है:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : सावधानी बरतें $(e).text()क्योंकि इसमें एक नई पंक्ति हो सकती है जिससे तुलना विफल हो सकती है। ऐसा तब होता है जब विकल्प स्पष्ट रूप से बंद हो जाते हैं (कोई </option>टैग नहीं ):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

यदि आप बस e.textकिसी भी अतिरिक्त व्हाट्सएप का उपयोग करते हैं जैसे कि अनुगामी न्यूलाइन को हटा दिया जाएगा, जिससे तुलना अधिक मजबूत होगी।

Comments

: इसमें महान नहीं है क्योंकि यह पाठ के टुकड़ों से मेल खाएगा; समस्याग्रस्त यदि आपका कोई विकल्प पाठ किसी अन्य विकल्प पाठ का एक विकल्प है।

— रयान

यह बहुत अधिक $ ('# आईडी विकल्प [मूल्य = "0"]') है। attr ('चयनित', 'चयनित');

— DevC

@Grastveit अगर यह एक वर्ग का कहना है कि यह चुना जाता है या नहीं तो पहले विकल्प का रंग कैसे बदल सकता है। धन्यवाद

— Zaker

@ मुझे समझ में नहीं आता है। शायद एक नए प्रश्न में इसे पोस्ट करें? या यह $ ('selDiv .myClass') है। css ('रंग', 'लाल')?

— वृहस्पतिवार

मैं आपको जोड़ना चाहूँगा DEFINITELY प्रोप का उपयोग करना चाहिए न कि attr का। मैं लगभग एक एप्लीकेशन को डिबग करने की कोशिश कर रहा हूं और इसे निर्धारित करने के लिए एटर से बदल रहा हूं।

— user609926

Answer 2

ऊपर दिए गए तरीकों में से कोई भी समाधान मुझे प्रदान करने की आवश्यकता नहीं है, इसलिए मुझे लगा कि मैं प्रदान करूंगा कि मेरे लिए क्या काम किया है।

$('#element option[value="no"]').attr("selected", "selected");

Comments

नोट jQuery 1.6 के रूप में इस का उपयोग करना चाहिए propऔर नहीं attr।

— कोडिंग किया

@GoneCoding का उपयोग करना .attrसही है। "चयनित" <विकल्प> की एक विशेषता है w3.org/TR/html5/forms.html#attr-option-selected

— कार्लोस Llongo

@CarlosLlongo: यह अप्रासंगिक है। JQuery की अनुशंसा को हमेशा propप्राथमिकता में उपयोग करना है attr। यह देखने के लिए w3.org पर प्रत्येक प्रॉपर्टी को देखने के लिए बचाता है कि क्या यह केवल एक विशेषता है, या बैकिंग क्रियाओं के साथ लागू किया गया है।

— कोडिंग किया गया

Answer 3

आप केवल val()विधि का उपयोग कर सकते हैं :

$('select').val('the_value');

Comments

यह गलत है क्योंकि आप सभी चयनित तत्वों का मान सेट कर रहे हैं the_value। .val चयनकर्ता / फ़िल्टर फ़ंक्शन नहीं है! यह एक प्रॉपर्टी ऐक्सेसर है और इसे पास करने से स्ट्रिंग की वैल्यू बढ़ जाती है। मैंने अपने उत्थान को वापस लेने की कोशिश की लेकिन परीक्षण में मुझे यह पता चलने के बाद बहुत देर हो गई।

— एरोनल्स

गर्म आपको उपयोगी जवाब के रूप में 10 वोट मिले हैं? वैल () एक गेटर और एक सेटर है। यदि आप सिर्फ वैल () का उपयोग करते हैं, तो आपको मूल्य मिलेगा। यदि आप वैल ('the_value') जैसे कुछ पास करते हैं, तो आप इसे 'the_value' पर सेट कर रहे हैं

— Gui

कृपया @AaronLS और @guilhermeGeek, डॉक्स (अंतिम उदाहरण) देखें। यह चयनकर्ता, चेकबॉक्स और रेडियो बटन के लिए चयनकर्ता के रूप में और पाठ इनपुट और टेक्स्टारेस के लिए मान सेटर के रूप में काम करता है।

— लिएंड्रो अर्डीसोन

आपने डॉक्यूमेंटेशन को गलत बताया है। चेकबॉक्स, रेडियो और लिस्टबॉक्स के लिए कमांड उन वस्तुओं के लिए "चयनित" विशेषता सेट करता है। अंतिम उदाहरण दिखाता है कि कैसे पासिंग वैल ("चेकबॉक्स 1") के कारण यह चयनित हो जाता है। यह सीएसएस / jquery चयनकर्ता के माध्यम से वस्तुओं को प्राप्त करने के मामले में "चयनकर्ता" के समान नहीं है। मैंने आपके कोड का परीक्षण किया, यह नीचे की पंक्ति में काम नहीं करता है।

— एरोनल्स

+1: नहीं, यह एक JQuery चयनकर्ता नहीं है, हालांकि मुझे लगता है कि इस सवाल की खोज करने वाले अधिकांश लोग मेरे जैसे हैं, और बस वर्तमान में चयनित विकल्प को बदलना चाहते हैं; एक वास्तविक चयनकर्ता के साथ आने का केवल एक तरीका है। और यह निश्चित रूप से उन उत्तरों से बेहतर है जो मैंने देखा है कि आपके पास सभी विकल्पों पर पुनरावृति है।

— kdgregory

Answer 4

मूल्य के हिसाब से, jQuery 1.7 के साथ मेरे लिए जो काम किया गया वह नीचे का कोड था, इसे आज़माएं:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

Comments

मुझे यकीन नहीं है कि आपको .change () विधि की आवश्यकता है।

— फिलिप सन् 19

.change()जरूरी हो गया था। मेरे पास एक उदाहरण था जहां मैं चयन के आधार पर थंबनेल स्विच कर रहा था। जब मैंने एक कस्टम थीम अपलोड की, तो विकल्पों की सूची से "कस्टम थीम" का चयन करना था। .prop()कॉल काम किया, लेकिन बिना .change(), मेरे चयन के अधिकार पर थंबनेल छवि अद्यतन कभी नहीं।

— Volomike

.change () सबसे अच्छी सलाह थी। +1

— Ja8zyjits

नोट: एक बूलियन propमान समान आउटपुट उत्पन्न करता है। जैसे.prop('selected', true)

— कोडिंग किया गया

निर्भर करता है, कुछ ब्राउज़र - शायद पुराने ब्राउज़र - स्ट्रिंग 'चयनित' की आवश्यकता है। मुझे लगता है कि उनमें से अधिकांश पाठ स्ट्रिंग का समर्थन करते हैं।

— मोटोलेटो

Answer 5

इसे करने के कई तरीके हैं, लेकिन सबसे साफ दृष्टिकोण को शीर्ष उत्तरों और तर्क के भार के बीच खो दिया गया है val()। इसके अलावा कुछ तरीके jQuery 1.6 के रूप में बदल गए हैं, इसलिए इसे अपडेट की आवश्यकता है।

निम्नलिखित उदाहरणों के लिए मैं मान लूंगा कि चर $selectएक वांछित वस्तु पर इंगित jQuery वस्तु है <select>, उदाहरण के लिए निम्न के माध्यम से:

var $select = $('.selDiv .opts');

नोट 1 - वैल्यू मैच के लिए वैल () का उपयोग करें:

मूल्य मिलान के लिए, val()एक विशेषता चयनकर्ता का उपयोग करने की तुलना में कहीं अधिक सरल है: https://jsfiddle.net/yz7tu49/5//

$select.val("SEL2");

का सेटर संस्करण उसी के साथ मिलान की संपत्ति सेट करके टैग .val()पर लागू किया selectजाता है , इसलिए सभी आधुनिक ब्राउज़रों पर ठीक काम करता है।selectedoptionvalue

नोट 2 - प्रोप ('चयनित', सत्य) का उपयोग करें:

यदि आप किसी विकल्प की चयनित स्थिति को सीधे सेट करना चाहते हैं, तो आप पैरामीटर (पाठ मान के बजाय ) के साथ उपयोग कर सकते हैं prop(नहीं ):attrbooleanselected

उदा। https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

नोट 3 - अज्ञात मूल्यों के लिए अनुमति दें:

यदि आप val()एक का चयन करने के लिए उपयोग करते हैं <option>, लेकिन वैल का मिलान नहीं किया जाता है (मूल्यों के स्रोत के आधार पर हो सकता है), तो "कुछ भी नहीं" चुना जाता है और $select.val()वापस आ जाएगा null।

तो, दिखाए गए उदाहरण के लिए, और मजबूती के लिए, आप कुछ इस तरह का उपयोग कर सकते हैं https://jsfiddle.net/1250Ldqn/ :

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

नोट 4 - सटीक पाठ मिलान:

यदि आप सटीक पाठ द्वारा मिलान करना चाहते हैं, तो आप filterफ़ंक्शन के साथ उपयोग कर सकते हैं । उदा। https://jsfiddle.net/yz7tu49b/2/ :

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

यद्यपि यदि आपके पास अतिरिक्त व्हाट्सएप हो सकता है तो आप चेक में ट्रिम को जोड़ना चाह सकते हैं

    return $.trim(this.text) == "some value to match";

नोट 5 - सूचकांक द्वारा मिलान

यदि आप इंडेक्स से मिलान करना चाहते हैं तो सिलेक्ट के बच्चों को अनुक्रमित करें जैसे कि https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

हालाँकि मैं अब भविष्य में प्रूफ कोड के लिए jQuery के पक्ष में प्रत्यक्ष DOM संपत्तियों से बचने की प्रवृत्ति रखता हूं, ताकि https://jsfiddle.net/yz7tu49b/5/ के रूप में भी किया जा सके :

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

नोट 6 - नए चयन में आग लगाने के लिए परिवर्तन () का उपयोग करें

उपरोक्त सभी मामलों में, परिवर्तन की घटना आग नहीं है। यह डिजाइन द्वारा है ताकि आप पुनरावर्ती परिवर्तन की घटनाओं के साथ हवा न दें।

यदि आवश्यक हो तो परिवर्तन घटना उत्पन्न करने के लिए, बस .change()jQuery selectऑब्जेक्ट में एक कॉल जोड़ें । उदाहरण के लिए पहला सबसे सरल उदाहरण https://jsfiddle.net/yz7tu49b/7/ बन जाता है

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

विशेषता चयनकर्ताओं का उपयोग करने वाले तत्वों को खोजने के लिए बहुत से अन्य तरीके भी हैं, जैसे [value="SEL2"], लेकिन आपको यह याद रखना होगा कि इन सभी अन्य विकल्पों की तुलना में विशेषता चयनकर्ता अपेक्षाकृत धीमा हैं।

Answer 6

आप चयन को नाम दे सकते हैं और इसका उपयोग कर सकते हैं:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

इसे उस विकल्प का चयन करना चाहिए जिसे आप चाहते हैं।

Answer 7

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

Comments

आपकी पोस्ट के लिए धन्यवाद, लेकिन यह उत्तर उस बातचीत में क्या जोड़ता है जो स्वीकृत उत्तरों में शामिल नहीं है?

— एडवर्ड

यदि कोई विकल्प पहले से ही चयनित है, तो यह विफल हो जाएगा क्योंकि ड्रॉप-डाउन में चयनित एक से अधिक आइटम नहीं हो सकते, जब तक कि यह बहु-चयन न हो। आपको .prop ('चयनित', सत्य) करने की आवश्यकता है

— derekcohen

Answer 8

प्रलेखन के लिए मेरे अपने प्रश्न का उत्तर देना। मुझे यकीन है कि इसे पूरा करने के अन्य तरीके हैं, लेकिन यह काम करता है और इस कोड का परीक्षण किया जाता है।

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

Answer 9

वास्तव में यह नीचे दिए गए तरीकों की कोशिश करेगा

सामान्य चयन के लिए विकल्प

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

चयन के लिए 2 विकल्प ट्रिगर विकल्प का उपयोग करने की आवश्यकता है

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

Answer 10

Jquery-2.1.4 का उपयोग करते हुए , मुझे मेरे लिए काम करने के लिए निम्नलिखित उत्तर मिला:

$('#MySelectionBox').val(123).change();

यदि आपके पास एक स्ट्रिंग मान है, तो निम्न प्रयास करें:

$('#MySelectionBox').val("extra thing").change();

अन्य उदाहरणों ने मेरे लिए काम नहीं किया इसलिए मैं इस उत्तर को जोड़ रहा हूं।

मुझे इसका मूल उत्तर मिला: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Answer 11

चयनित ट्रिगर के साथ चयन मान सेट करने के लिए:

$('select.opts').val('SEL1').change();

---

एक गुंजाइश से विकल्प स्थापित करने के लिए:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

यह कोड चयनकर्ता को स्थिति के साथ चयन वस्तु का पता लगाने के लिए उपयोग करता है, फिर चयनित विशेषता को बदल देता है attr()।

---

Futher, मैं change()विशेषता सेट करने के बाद ईवेंट जोड़ने की सलाह देता हूं selected, ऐसा करने से कोड उपयोगकर्ता द्वारा चयन बदलने के करीब होगा।

Answer 12

मैं इसका उपयोग करता हूं, जब मुझे सूची का सूचकांक पता होता है।

$("#yourlist :nth(1)").prop("selected","selected").change();

यह सूची को बदलने, और परिवर्तन घटना को आग लगाने की अनुमति देता है। ": Nth (n)" को इंडेक्स 0 से गिना जा रहा है

Answer 13

मैं साथ चलूँगा: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

Answer 14

इसे इस्तेमाल करे

आप सिर्फ #id (यानी # select_name) के बजाय चुनिंदा फ़ील्ड आईडी का उपयोग करें

विकल्प मूल्य के बजाय अपने चयनित विकल्प मूल्य का उपयोग करें

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

Answer 15

यदि आप कार्य करने के लिए विशेषता भेजते हैं और अपडेट करने के लिए विकल्प का चयन करने की आवश्यकता है, तो Jquery को चुना गया है

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

Answer 16

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

Answer 17

$('select').val('the_value');सही समाधान लग रहा है और आप तो डेटा तालिका पंक्तियों अगर:

$row.find('#component').val('All');

Answer 18

यदि आप jQuery का उपयोग नहीं करना चाहते हैं, तो आप नीचे दिए गए कोड का उपयोग कर सकते हैं:

document.getElementById("mySelect").selectedIndex = "2";

Answer 19

सवाल के लिए धन्यवाद। आशा है कि यह कोड ऑफ़ कोड आपके लिए काम करेगा।

var val = $("select.opts:visible option:selected ").val();

Answer 20

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

या

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Comments

कृपया अपना उत्तर संपादित करें ताकि कोड कोड के रूप में स्वरूपित हो। टूलबार का उपयोग करके या चार कोड द्वारा प्रत्येक कोड ब्लॉक की सभी लाइनों को इंडेंट करके ऐसा करें।

— बेरूलिक