Modifica dell'opzione selezionata di un elemento Seleziona HTML

Nel mio HTML, ho un <select>con tre <option>elementi. Voglio usare jQuery per verificare il valore di ogni opzione rispetto a un Javascript var. Se uno corrisponde, voglio impostare l'attributo selezionato di tale opzione. Come potrei farlo?

Vanilla JavaScript

Utilizzando il semplice vecchio JavaScript:

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

Ma se vuoi davvero usare 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 - Utilizzo degli attributi di valore

Nel caso in cui le opzioni abbiano attributi di valore che differiscono dal loro contenuto di testo e che si desidera selezionare tramite il contenuto di testo:

<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>

dimostrazione

Ma se hai impostato sopra e vuoi selezionare per valore usando jQuery, puoi fare come prima:

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

DOM moderno

Per i browser che supportano document.querySelectore la HTMLOptionElement::selectedproprietà, questo è un modo più conciso di eseguire questa attività:

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

dimostrazione

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>

dimostrazione

Polimero

<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>

dimostrazione

Angolare 2

Nota: questo non è stato aggiornato per l'ultima versione stabile.

<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>

dimostrazione

Vue 2

<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>

dimostrazione

Nessuno degli esempi che usano jquery qui è in realtà corretto in quanto lasceranno la selezione visualizzando la prima voce anche se il valore è stato modificato.

Il modo giusto per selezionare l'Alaska e fare in modo che mostra l'elemento giusto selezionato utilizzando:

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

Con jquery sarebbe:

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

Puoi modificare il valore dell'elemento select, che cambia l'opzione selezionata in quella con quel valore, usando JavaScript:

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

DEMO

markup

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

dimostrazione

Voglio cambiare sia l'opzione value che il textContent (ciò che vediamo) dell'opzione selezionata dell'elemento selezionato in "Mango".

Di seguito è riportato il codice più semplice che ha funzionato:

var newValue1 = 'Mango'

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

Spero che aiuti qualcuno. Buona fortuna.
Votazione se questo ti ha aiutato.

Prova questa demo

1. Selezione dell'opzione in base al suo valore

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

2. Selezione dell'opzione in base al testo

   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 di supporto

<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>

Risposte eccellenti: ecco la versione D3 per chiunque cerchi:

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

Ho usato quasi tutte le risposte pubblicate qui, ma non mi sento a mio agio, quindi scavo un passo più in là e ho trovato una soluzione facile che si adatta alle mie esigenze e mi sento degno di condivisione con voi ragazzi.
Invece di iterare in tutte le opzioni o utilizzando JQuery puoi fare usando JS core in semplici passaggi:

Esempio

<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>

Quindi devi conoscere il valore dell'opzione da selezionare.

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

Come usare?

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

I vostri commenti sono ben accetti :) AzmatHunzai.

Dopo molte ricerche ho provato @kzh nella lista selezionata dove conosco solo optionil testo interno non l' valueattributo, questo codice basato sulla risposta selezionata l'ho usato per cambiare l'opzione di selezione in base alla pagina corrente urlin questo formato 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>

Ciò manterrà i urlparametri mostrati come selezionati per renderlo più user friendly e il visitatore sa quale pagina o profilo sta attualmente visualizzando.

L'ho usato dopo aver aggiornato un registro e ho cambiato lo stato della richiesta tramite ajax, quindi eseguo una query con il nuovo stato nello stesso script e lo inserisco nell'elemento tag select new state per aggiornare la vista.

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

Spero sia utile.

Versione Vanilla.JS leggermente più ordinata. Supponendo che tu abbia già risolto la nodeListmancanza.forEach() :

NodeList.prototype.forEach = Array.prototype.forEach

Appena:

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

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