मान से चुनिंदा विकल्प 'चयनित' सेट करें

Question

मेरा इसमें selectकुछ विकल्पों के साथ एक क्षेत्र है। अब मुझे optionsjQuery वाले लोगों में से एक का चयन करने की आवश्यकता है । लेकिन मैं यह कैसे कर सकता हूं जब मुझे पता valueहै optionकि इसका चयन होना चाहिए?

मेरे पास निम्न HTML है:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

मुझे मान के साथ विकल्प का चयन करने की आवश्यकता है val2। यह कैसे किया जा सकता है?

यहाँ एक डेमो पेज है: http://jsfiddle.net/9Stxb/

Comments

ड्रॉपडाउन उपयोग के सिंगल वैल्यू के लिए .val ('5') मल्टीपल सिलेक्शन यूज़ वैल (['5', '4', '8']) के लिए फुल डेमो freakyjolly.com/ ...

— कोड स्पाई

Answer 1

वहाँ एक आसान तरीका है कि आप विकल्प टैग में जाने की आवश्यकता नहीं है:

$("div.id_100 select").val("val2");

इस jQuery विधि को देखें ।

Comments

यह FF में कीड़े पैदा कर सकता है (कम से कम) खाली चुनिंदा बॉक्स में होने वाला

— जोनाथन

प्रश्न का पोस्टर इसके साथ शुरू होता है: "मेरे पास कुछ विकल्पों के साथ एक चयन क्षेत्र है ..." इसलिए यह खाली नहीं है, इसलिए समाधान सही है।

— पिंगशिएन ४२२

@JamesCazzetta घाटी को एक सरणी भेजती है .val(["Multiple2", "Multiple3"]):। api.jquery.com/val/#val-value

— scipilot

मुझे मैन्युअल रूप .val(x).change();से चयन के onChange इवेंट को ट्रिगर करने के लिए कॉल करना था , ऐसा लगता है कि यह सेटिंग () आग नहीं लगाती है।

— scipilot

सावधान रहें: वैल () उन मूल्यों को निर्धारित कर सकते हैं जो विकल्पों में मौजूद नहीं हैं।

— डैनियल

Answer 2

मान 'val2' के साथ एक विकल्प का चयन करने के लिए:

$('.id_100 option[value=val2]').attr('selected','selected');

Comments

यह सबसे अच्छा समाधान है अगर वांछित मूल्य एक विकल्प हो सकता है या नहीं भी हो सकता है, और यदि यह विकल्प नहीं है तो आप एक बदलाव नहीं करना चाहते हैं। यदि आप .val()चयन पर उपयोग करते हैं और ऐसा मूल्य लेने की कोशिश करते हैं जो ऐसा नहीं है तो यह सब कुछ रद्द कर देगा।

— वैली ऑल्टमैन

सहमत - यह सबसे सुरुचिपूर्ण विकल्प है - स्पष्ट और बिंदु तक। सुनिश्चित नहीं है कि "प्रोप" सभी मामलों (ब्राउज़रों) में बेहतर काम करता है। लेकिन यह निश्चित रूप से आपके लिए आसान खोज है।

— ली फुलर

इसके अलावा, मैंने उपयोग किया है $("select[name=foo] option[value=bar]).attr('selected','selected');जो मैंने परीक्षण किए गए सभी ब्राउज़रों के लिए भी अच्छा काम किया है।

— ली फुलर

मुझे यह उत्तर स्वीकृत उत्तर से बेहतर लगता है, क्योंकि: element.outerHTML इस से अपडेट हो जाता है, जबकि यह स्वीकृत उत्तर के साथ नहीं होता है।

— होल्डऑफ ह्यूंगर

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

— chris c

Answer 3

change()मान का चयन करने के बाद घटना का उपयोग करें । डॉक्स से:

यदि फ़ील्ड परिवर्तित की गई सामग्री के बिना फ़ोकस खो देती है, तो घटना ट्रिगर नहीं होती है। घटना को मैन्युअल रूप से ट्रिगर करने के लिए, .change()बिना तर्क के आवेदन करें :

$("#select_id").val("val2").change();

अधिक जानकारी .change () पर है ।

Comments

यह बहुत अधिक उत्थान के योग्य है और शीर्ष पर है। इसका उचित तरीका, कोई फ़िडलिंग नहीं है prop, attrआदि और सभी घटनाओं को ठीक से प्रचारित करता है।

— पॉलिग्नोमे

हां, यह सभी घटनाओं को सही ढंग से प्रचारित करता है। मेरे परीक्षण में, "अटर" ने पहली बार काम किया, फिर सब कुछ "चयनित" बना रहा। मैंने "प्रोप" का उपयोग किया, जिसने सब कुछ सही ढंग से बदल दिया, लेकिन अन्य फ़ील्ड्स (शो / छुपाएं) जैसी घटनाओं का प्रचार नहीं किया। इस उत्तर ने सभी मामलों में काम किया और इसे सही माना जाना चाहिए।

— आईलीन

यदि आपके पास पहले से ही एक श्रोता है जो इसे बदलने के लिए बाध्य है, तो यह एक अनंत लूप का कारण होगा।

— क्वाटर्ज़मैन

कुछ समय के लिए प्रयास करने और बदलने के लिए मेरी मूर्खतापूर्ण लटकती मूल्य पाने के लिए संघर्ष किया, यह समाधान केवल एक ही काम था! धन्यवाद दोस्त!

— AxleWack

धन्यवाद। मैंने इस सुझाव को पाने से पहले बहुत खोज की, और यह केवल एक चीज थी जिसने काम किया। यकीन नहीं है कि यह शीर्ष पर क्यों नहीं है।

— रोब सेंटोरो

Answer 4

सभी का चयन रद्द करें और चयन विकल्पों को फ़िल्टर करें:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

Comments

चयनित विशेषता का मान एक रिक्त स्ट्रिंग या हो सकता है selected। क्या आपका मतलब था .prop()?

— रिंक.टेंटेंड ।6

अच्छा उत्तर। खाली विकल्पों के साथ स्वीकृत उत्तर समाप्त होता है, जब मूल्य विकल्पों में मौजूद नहीं होता है।

— रौली राजन्दे

टीओपी के लिए, यहाँ सबसे अच्छा है। भविष्य के उपयोग के लिए मुझे लगता है कि हमें attr के बजाय प्रोप का उपयोग करना चाहिए।

— डैनियल

मुझे यह समाधान बहुत पसंद है। मैं सोच रहा हूँ कि क्या यह बेहतर होगा, प्रदर्शन के लिहाज से, अगर चयनकर्ता को ".id_100> विकल्प" में बदल दिया गया था

— हिल

Answer 5

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

मान से लंबित स्थिति पर सेट करना

   $('#contribution_status_id').val("2");

Answer 6

मेरे लिए निम्नलिखित ने काम किया

$("div.id_100").val("val2").change();

Answer 7

मुझे लगता है कि सबसे आसान तरीका सेट वैल () का चयन करना है, लेकिन आप निम्नलिखित की जांच कर सकते हैं। देखें कि jQuery में सेलेक्ट और ऑप्शन टैग को कैसे हैंडल करें? विकल्पों के बारे में अधिक जानकारी के लिए।

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

अनुकूलित नहीं है, लेकिन निम्नलिखित तर्क कुछ मामलों में भी उपयोगी है।

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Comments

मैं सीधे वैलिंग सेटिंग पर यह तरीका पसंद करता हूं। मुझे विशेषता सेट करना भी पसंद है - डिबगिंग के साथ मदद करता है। $ (यह) .attr ("चयनित", "चयनित")

— क्रेग जैकब्स

Answer 8

आप विशेषता चयनकर्ता का उपयोग करके किसी भी विशेषता और उसके मूल्य पर चयन कर सकते हैं [attributename=optionalvalue], इसलिए आपके मामले में आप विकल्प का चयन कर सकते हैं और चयनित विशेषता सेट कर सकते हैं।

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

valueवह मान कहां है जिसका आप चयन करना चाहते हैं।

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

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

Answer 9

सबसे अच्छा तरीका इस तरह है:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

Comments

क्रोम पर, सेटिंग $('<select>').val('asdf')ने वर्तमान में चयनित विकल्प दिखाने के लिए चयन को अपडेट नहीं किया। इस जवाब ने उस समस्या को ठीक कर दिया।

— यहोशू बर्न्स

। हालांकि इस भी काम करेगा लेकिन $ ( '<चयन>') वैल ( 'asdf') क्रोम 79.0.3945.88 में अच्छा काम कर रहा है

— Qmaster

Answer 10

एक सरल जवाब है, html पर

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

jquery पर, बटन या जो भी हो, फ़ंक्शन के नीचे कॉल करें

$('#idUkuran').val(11).change();

यह सरल और 100% काम करता है, मेरे काम से लिया गया coz ... :) आशा है कि इसकी मदद ..

Comments

आपका डिफ़ॉल्ट मान 1000 है? क्यों नहीं ""

— voodoocode

यह एक वैकल्पिक है, आप अपनी आवश्यकता के अनुसार संशोधित कर सकते हैं .. :)

— मंगल जोजो

Answer 11

इसे उखाड़ फेंकने का कोई कारण नहीं है, आप जो भी कर रहे हैं वह एक संपत्ति तक पहुंच और स्थापित कर रहा है। बस।

ठीक है, तो कुछ बुनियादी डोम: यदि आप सीधे जावास्क्रिप्ट में ऐसा कर रहे थे, तो आप यह करेंगे:

window.document.getElementById('my_stuff').selectedIndex = 4;

लेकिन आप इसे सीधे जावास्क्रिप्ट के साथ नहीं कर रहे हैं, आप इसे jQuery के साथ कर रहे हैं। और jQuery में, आप एक संपत्ति सेट करने के लिए .prop () फ़ंक्शन का उपयोग करना चाहते हैं, इसलिए आप इसे इस तरह से करेंगे:

$("#my_stuff").prop('selectedIndex', 4);

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

Answer 12

ऐसा करने का सबसे आसान तरीका है:

एचटीएमएल

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

आउटपुट: यह ईएनटी को सक्रिय करेगा ।

Answer 13

change()चयन मूल्य निर्धारित करने के बाद उपयोग करना बेहतर है ।

$("div.id_100 select").val("val2").change();

---

ऐसा करने से, कोड उपयोगकर्ता द्वारा चयन को बदलने के करीब होगा, स्पष्टीकरण जेएस फिडेल में शामिल है :

जेएस फिडल

Comments

ऐसा क्यों है? क्या आप थोड़ा समझा सकते हैं?

— 71GA

जेएस फिडल । एक परिवर्तन () पद्धति के साथ, कोड उपयोगकर्ता द्वारा चयन बदलने के करीब होगा, जबकि हैंडल बदलने के लिए ऑन-चेंज श्रोताओं की आवश्यकता होती है।

— निक त्सई

Answer 14

$('#graphtype option[value=""]').prop("selected", true);

यह अच्छी तरह से काम करता है जहां #graphtypeचयन टैग की आईडी है।

उदाहरण का चयन करें टैग:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

Answer 15

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

Answer 16

उपयोग:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

यह मेरे लिए काम करता है। मैं फैंसी कोड अपडेट फॉर्म में मूल्य पार्स करने के लिए इस कोड का उपयोग कर रहा हूं, और app.js से मेरा पूरा स्रोत है:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

और मेरा PHP कोड है:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

Answer 17

.attr () कभी-कभी पुराने jQuery संस्करणों में काम नहीं करता है, लेकिन आप .prop () का उपयोग कर सकते हैं :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

Answer 18

यह नियंत्रण के लिए सुनिश्चित करने के लिए काम करता है :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

Answer 19

बस इस कोड में डाल दिया:

$("#Controls_ID").val(value);

Answer 20

स्रोत लिंक

ड्रॉपडाउन में सिंगल और मल्टीपल वैल्यू सिलेक्शन के लिए वैल () jQuery मेथड का इस्तेमाल करें

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

एचटीएमएल

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

Answer 21

इसे इस्तेमाल करे। सरल अभी तक प्रभावी javaScript + jQuery के घातक कॉम्बो।

चयन करें:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

चयन:

document.getElementById("YourSelectComponentID").value = 4;

अब आपके विकल्प 4 का चयन किया जाएगा। आप ऐसा कर सकते हैं, डिफ़ॉल्ट रूप से प्रारंभ पर मूल्यों का चयन करने के लिए।

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

या एक साधारण फ़ंक्शन बनाएं जिसमें लाइन डाली जाए और विकल्प को चुनने के लिए किसी भी फ़ंक्शन पर फ़ंक्शन को कॉल करें

JQuery + javaScript का मिश्रण जादू करता है…।

Answer 22

पुरानी पोस्ट है, लेकिन यहाँ एक सरल फ़ंक्शन है जो jQuery प्लगइन की तरह कार्य करता है।

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

आप बस कुछ इस तरह से कर सकते हैं:

$('.id_100').selectOption('val2');

इसका उपयोग क्यों करें, क्योंकि आप चयनित satemant को DOM में बदल देते हैं क्योंकि क्रॉसब्रोसर समर्थित है और इसे बदलने के लिए आपके द्वारा परिवर्तन को ट्रिगर भी करेगा।

आधारभूत मानव क्रिया अनुकरण है।

Answer 23

• आपको इसे उस मूल्य को ध्यान में रखना चाहिए जिसे आप गतिशील रूप से बदलना चाहते हैं, आपके HTML में परिभाषित किए गए विकल्पों में से एक जैसा होना चाहिए case sensative। आप अपने चुनिंदा बॉक्स को गतिशील रूप से निम्नानुसार बदल सकते हैं,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

Answer 24

ऐसा प्रतीत होता है कि चुनिंदा ड्रॉप डाउन नियंत्रणों के साथ एक मुद्दा गतिशील रूप से नहीं बदल रहा है जब नियंत्रण स्थिर रूप से HTML पृष्ठ में होने के बजाय गतिशील रूप से बनाए जाते हैं।

JQuery में इस समाधान ने मेरे लिए काम किया।

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

सिर्फ एक परिशिष्ट के रूप में दूसरी पंक्ति के बिना कोड की पहली पंक्ति, वास्तव में पारदर्शी तरीके से काम करती है, चयनित सूचकांक को पुनः प्राप्त करना सूचकांक निर्धारित करने के बाद सही था और यदि आपने वास्तव में नियंत्रण पर क्लिक किया तो यह सही आइटम दिखाएगा लेकिन यह प्रतिबिंबित नहीं हुआ। नियंत्रण के शीर्ष लेबल में।

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

Answer 25

एक मुद्दा जब मैं एक आईडी और पाठ एक कोड है, तो मैं भाग गया। आप कोड का उपयोग करके मूल्य निर्धारित नहीं कर सकते हैं, लेकिन आपके पास आईडी तक सीधी पहुंच नहीं है।

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here

Answer 26

इससे मेरा काम बनता है

$("#id_100").val("val2");

Answer 27

यह अच्छी तरह से काम करता है

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });