Ändern der ausgewählten Option eines HTML Select-Elements

In meinem HTML habe ich ein <select>mit drei <option>Elementen. Ich möchte jQuery verwenden, um den Wert jeder Option mit einem Javascript zu vergleichen var. Wenn eine übereinstimmt, möchte ich das ausgewählte Attribut dieser Option festlegen. Wie würde ich das machen?

Vanille JavaScript

Verwenden von einfachem altem 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

Aber wenn Sie jQuery wirklich verwenden möchten:

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 - Verwenden von Wertattributen

Falls Ihre Optionen Wertattribute haben, die sich von ihrem Textinhalt unterscheiden und Sie über Textinhalt auswählen möchten:

<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

Wenn Sie jedoch die oben genannten Einstellungen vorgenommen haben und mit jQuery nach Wert auswählen möchten, können Sie wie folgt vorgehen:

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

Modernes DOM

Für die unterstützten Browser document.querySelectorund die HTMLOptionElement::selectedEigenschaft ist dies eine prägnantere Methode, um diese Aufgabe auszuführen:

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

Polymer

<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

Winkel 2

Hinweis: Dies wurde für die endgültige stabile Version nicht aktualisiert.

<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

Keines der hier verwendeten Beispiele für jquery ist tatsächlich korrekt, da die Auswahl den ersten Eintrag anzeigt, obwohl der Wert geändert wurde.

Der richtige Weg, um Alaska auszuwählen und die Auswahl das richtige Element anzeigen zu lassen, wie ausgewählt mit:

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

Mit jquery wäre:

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

Sie können den Wert des Auswahlelements ändern, wodurch die ausgewählte Option mithilfe von JavaScript in die Option mit diesem Wert geändert wird:

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

Demo

Ich möchte den Wert und den Textinhalt der ausgewählten Option des ausgewählten Elements (was wir sehen) in 'Mango' ändern.

Der einfachste Code, der funktioniert hat, ist unten:

var newValue1 = 'Mango'

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

Hoffe das hilft jemandem. Viel Glück.
Stimmen Sie ab, wenn dies Ihnen geholfen hat.

Testen Sie diese Demo

1. Auswahl der Option basierend auf ihrem Wert

   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. Auswahl der Option basierend auf dem Text

   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 unterstützen

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

Hervorragende Antworten - hier ist die D3-Version für alle, die suchen:

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

Ich habe fast alle hier veröffentlichten Antworten verwendet, bin aber damit nicht zufrieden. Deshalb habe ich einen Schritt weiter gegraben und eine einfache Lösung gefunden, die meinen Bedürfnissen entspricht und es wert ist, mit euch geteilt zu werden.
Anstatt alle Optionen zu iterieren oder JQuery zu verwenden , können Sie Core JS in einfachen Schritten verwenden:

Beispiel

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

Sie müssen also den Wert der auswählenden Option kennen.

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

Wie benutzt man?

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

Ihre Kommentare sind willkommen. :) AzmatHunzai.

Nach langem Suchen habe ich @kzh in einer Auswahlliste ausprobiert, in der ich nur den optioninneren Text und nicht das valueAttribut kenne. Dieser Code basiert auf der Auswahlantwort. Ich habe ihn verwendet, um die Auswahloption entsprechend der aktuellen Seite urlin diesem Format zu ändernhttp://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>

Dadurch werden die urlParameter als ausgewählt angezeigt, um sie benutzerfreundlicher zu gestalten, und der Besucher weiß, welche Seite oder welches Profil er gerade anzeigt.

Ich habe dies verwendet, nachdem ich ein Register aktualisiert und den Status der Anforderung über Ajax geändert habe. Dann führe ich eine Abfrage mit dem neuen Status im selben Skript durch und setze ihn in den neuen Status des Select-Tag-Elements, um die Ansicht zu aktualisieren.

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

Ich hoffe das ist nützlich.

Etwas ordentlicher Vanilla.JS Version. Angenommen, Sie haben das nodeListFehlen bereits behoben .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Gerade:

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

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