एचटीएमएल सिलेक्ट एलिमेंट के चयनित विकल्प को बदलना

148

मेरे HTML में, मेरे पास <select>तीन <option>तत्व हैं। मैं जावास्क्रिप्ट के खिलाफ प्रत्येक विकल्प के मूल्य की जांच करने के लिए jQuery का उपयोग करना चाहता हूं var। यदि एक मेल खाता है, तो मैं उस विकल्प की चयनित विशेषता सेट करना चाहता हूं। मुझे यह कैसे करना है?

javascript jquery html

— llihttocs
स्रोत

अपना HTML पोस्ट करें। लेकिन हमेशा की तरह:$('#myselectid').val()

— Samich

9

निश्चित नहीं है कि उसे क्यों अपमानित किया गया था, वह एक नया उपयोगकर्ता है और सवाल वैध लगता है।

— 17

323

वेनिला जावास्क्रिप्ट

सादे पुराने जावास्क्रिप्ट का उपयोग करना:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

स्निपेट का विस्तार करें

jQuery

लेकिन अगर आप वास्तव में jQuery का उपयोग करना चाहते हैं:

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

कोड स्निपेट दिखाएं

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

स्निपेट का विस्तार करें

jQuery - मान गुण का उपयोग करना

यदि आपके विकल्पों में मूल्य विशेषताएँ हैं जो उनकी पाठ सामग्री से भिन्न हैं और आप पाठ सामग्री के माध्यम से चयन करना चाहते हैं:

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

डेमो

लेकिन अगर आपके पास उपरोक्त सेट अप है और आप jQuery का उपयोग करके मूल्य का चयन करना चाहते हैं, तो आप पहले की तरह कर सकते हैं:

var val = 3;
$('#sel').val(val);

आधुनिक डोम

उन ब्राउज़र के लिए जो समर्थन करते हैं document.querySelectorऔर HTMLOptionElement::selectedसंपत्ति, यह इस कार्य को पूरा करने का एक अधिक सफल तरीका है:

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

डेमो

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

डेमो

पॉलिमर

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

डेमो

कोणीय 2

नोट: इसे अंतिम स्थिर रिलीज़ के लिए अपडेट नहीं किया गया है।

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

डेमो

वयु २

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

डेमो

— kzh
स्रोत

1

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

— llihttocs

1

@aelgoa jsperf.com/option-select-loop/2 मैंने आपका पहला स्निपेट मेरे कोड को अधिक नकल करने के लिए ठीक किया, जो मेरा धीमा बनाता है। मैंने प्री-इंक्रीमेंट के बजाय पोस्ट-इन्क्रीमेंट का उपयोग किया, और फिर मैंने एक और टेस्ट जोड़ा, जो आपके 3rd टेस्ट से थोड़ा तेज है।

— kzh

1

document.evaluate(".//select[@id='sel']/option[text()='Fish']", document.body, null, 9, null).singleNodeValue.selected = true;

— दुखवादी के लिए

1

@llihttocs अब क्या होगा?

— kzh

1

वेनिला जावास्क्रिप्ट को शामिल करने के लिए धन्यवाद - हममें से जो खुद के लिए कोड करना पसंद करते हैं :)

— पीटर कुलेन

24

यहां jquery का उपयोग करने वाले कोई भी उदाहरण वास्तव में सही नहीं हैं क्योंकि वे पहली प्रविष्टि को प्रदर्शित करते हुए छोड़ देंगे, भले ही मूल्य बदल दिया गया हो।

अलास्का का चयन करने का सही तरीका और चयन के अनुसार सही आइटम दिखाना है:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

Jquery के साथ होगा:

$('#state').val('AK').change();

— जस्टिन बुशर
स्रोत

19

आप चयनित तत्व के मूल्य को बदल सकते हैं, जो उस मान के साथ चयनित विकल्प को जावास्क्रिप्ट का उपयोग करके बदल देता है:

document.getElementById('sel').value = 'bike';

डेमो

— इविन राज
स्रोत

1

समय के कारण आपका उदाहरण काफी काम नहीं करता है। मैंने इसे प्रतीक्षा करने के लिए अपडेट किया जब तक कि उपयोगकर्ता एक बटन क्लिक नहीं करता: jsfiddle.net/xkqTR/3271

— dlaliberte

यह चुनिंदा तत्व पर परिवर्तन की घटना नहीं करता है। क्या आपके पास उस पर समाधान है?

— ड्रैगनट्रैक

10

मार्कअप

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

डेमो

— Shef
स्रोत

मुझे लगता है कि यह वही है जो मुझे चाहिए था। मैंने पहले ही आपके कोड की कई पंक्तियों का उपयोग कर लिया है और यह काम करने लगता है। महान स्निपेट्स के लिए धन्यवाद।

— llihttocs

@llihttocs: खुशी है कि मैंने मदद की। उस उत्तर को स्वीकार करने के लिए स्वतंत्र महसूस करें, जो उत्तर के शीर्ष बाएँ हाथ की ओर मतगणना के नीचे खाली टिक पर क्लिक करके आपकी समस्या को हल करता है। ताकि इस प्रश्न को हल के रूप में चिह्नित किया जा सके और अन्य जो उसी समाधान की तलाश में हैं उन्हें उत्तर आसानी से मिल जाएगा।

— शेफ

4

मैं चुनिंदा तत्व के चयनित विकल्प के मूल्य और टेक्स्ट कॉन्टेंट (जो हम देखते हैं) को 'मैंगो' में बदलना चाहते हैं।

सबसे सरल कोड जो नीचे काम किया है:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

आशा है कि किसी की मदद करता है। शुभकामनाएँ।
वोट अप अगर यह आपकी मदद की।

— मनोहर रेड्डी पोरेड्डी
स्रोत

2

इस डेमो का परीक्षण करें

इसके मूल्य के आधार पर विकल्प का चयन करना

var vals = [2,'c'];

$('option').each(function(){
   var $t = $(this);

   for (var n=vals.length; n--; )
      if ($t.val() == vals[n]){
         $t.prop('selected', true);
         return;
      }
});

इसके पाठ के आधार पर विकल्प का चयन करना

var vals = ['Two','CCC'];                   // what we're looking for is different

$('option').each(function(){
   var $t = $(this);

   for (var n=vals.length; n--; )
      if ($t.text() == vals[n]){            // method used is different
         $t.prop('selected', true);
         return;
      }
});

HTML सपोर्ट कर रहा है

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

— vol7ron
स्रोत

1

यह उदाहरण बहुत उपयोगी है। मुझे यकीन नहीं था कि कैसे विकल्पों के माध्यम से पुनरावृति करना और चयनित विशेषता सेट करना है। ऐसे पूर्ण उत्तर के लिए धन्यवाद।

— llihttocs

कोई समस्या नहीं llihttocs, सवाल / टिप्पणियों के बगल में ऊपर तीर पर क्लिक करें जो आपको उपयोगी लगता है। और आपके द्वारा चुने गए उत्तर के आगे चेकमार्क चुनें। - आप या तो w / o कर सकते हैं, जिसमें आपको कुछ भी खर्च करना होगा

— vol7ron

1

उत्कृष्ट जवाब - यहाँ किसी को देखने के लिए डी 3 संस्करण है:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

— ट्रिस्टन रीड
स्रोत

1

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

उदाहरण

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

इसलिए आपको चयन करने के लिए विकल्प का मूल्य पता होना चाहिए।

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

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

selectOrganization(25); //this will select SONY from option List

आपकी टिप्पणियों का स्वागत है। :) अज़मतहुंजाई।

— अज़मत करीम खान
स्रोत

1

बहुत खोज के बाद मैंने चयनित सूची पर @kzh की कोशिश की, जहाँ मैं केवल optionआंतरिक पाठ को ही नहीं जानता value, इस कोड को चुनिंदा उत्तर के आधार पर मैंने urlइस प्रारूप पर वर्तमान पृष्ठ के अनुसार चयन विकल्प को बदलने के लिए उपयोग किया।http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

यह urlपैरामीटर को अधिक उपयोगकर्ता के अनुकूल बनाने के लिए चयनित के रूप में दिखाया गया है और आगंतुक जानता है कि वह वर्तमान में किस पृष्ठ या प्रोफ़ाइल को देख रहा है।

— सलेम
स्रोत

0

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

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

मैं उम्मीद करता हूँ यह उपयोगी है।

— user7071893
स्रोत

-1

थोड़ा नट्टर वेनिला.जेएस संस्करण। यह मानकर कि आप पहले से ही nodeListलापता हैं .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

बस:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})

— mikemaccana
स्रोत