it-swarm.it

Modifica dell'opzione selezionata di un elemento Seleziona HTML

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

110
llihttocs

JavaScript alla vaniglia

Usando il vecchio JavaScript semplice:

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 tu davvero vuoi 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 - Uso degli attributi del valore

Nel caso in cui le tue opzioni abbiano attributi di valore che differiscono dal loro contenuto testuale e vuoi selezionare tramite il contenuto del 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>

Demo

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.querySelector e la proprietà HTMLOptionElement::selected , questo è un modo più succinto di eseguire questa operazione:

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

Demo

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>

Demo

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>

Demo

Angolare 2

Nota: questo non è stato aggiornato per la versione stabile finale.

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

Demo

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>

Demo

263
kzh

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

Il modo giusto per selezionare Alaska e fare in modo che la selezione mostri l'elemento giusto come selezionato usando:

<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();
19
Justin Buser

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

Demo

7
Shef

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

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

DEMO

4
Ivin Raj

Voglio cambiare l'opzione selezionata dell'elemento selezionato sia per valore che per testoContent (ciò che vediamo) in "Mango".

Il codice più semplice che ha funzionato è qui sotto:

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.
Voto se questo ti ha aiutato.

2

Prova questa demo

  1. Selezione dell'opzione basata sul 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 basata sul suo 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;
          }
    });
    

Supporto 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>
2
vol7ron

Ho usato quasi tutte le risposte postate qui, ma non mi sentivo a mio agio così ho scavato in un solo passaggio e ho trovato una soluzione facile che si adatta alle mie esigenze e che vale la pena condividere con voi ragazzi.
Invece dell'iterazione su tutte le opzioni o usando JQuery puoi usare coreJSin 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 è necessario 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 tuoi commenti sono benvenuti :) AzmatHunzai.

1

Risposte eccellenti: ecco la versione D3 per chi cerca:

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

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

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

Spero che questo sia utile.

0
user7071893

Dopo un sacco di ricerche ho provato @kzh sulla lista di selezione in cui so solo option testo interno non value attributo, Questo codice in base alla risposta selezionata l'ho usato per cambiare selezionare l'opzione in base alla pagina corrente url in 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 parametri url mostrati come selezionati per renderlo più user friendly e il visitatore sa quale pagina o profilo sta attualmente visualizzando. 

0
Salem