webentwicklung-frage-antwort-db.com.de

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

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

110
llihttocs

Vanille JavaScript

Verwenden Sie einfaches altes 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

Wenn Sie jedoch wirklich jQuery 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 diese ü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 obigen Einstellungen eingerichtet haben und mit jQuery einen Wert auswählen möchten, können Sie dies wie zuvor tun:

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

Modernes DOM

Für die Browser, die document.querySelector und die HTMLOptionElement::selected -Eigenschaft unterstützen, ist dies eine kürzere Möglichkeit, 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

263
kzh

Keines der Beispiele, in denen jquery verwendet wird, ist tatsächlich korrekt, da die Auswahl den ersten Eintrag verlässt, obwohl der Wert geändert wurde.

Der richtige Weg, um Alaska auszuwählen und das ausgewählte Element mit dem ausgewählten Element anzeigen zu lassen:

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

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

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

DEMO

4
Ivin Raj

Ich möchte den Wert und den textContent der ausgewählten Option des ausgewählten Elements 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 Ihnen dies geholfen hat.

Testen Sie diese Demo

  1. Auswahl der Option basierend auf ihrem value

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

Ich habe fast alle hier veröffentlichten Antworten verwendet, aber damit nicht zufrieden, also habe ich Dig einen Schritt weiter gemacht und eine einfache Lösung gefunden, die zu meinem Bedürfnis passt und es wert ist, mit Ihnen geteilt zu werden.
Anstatt die Optionen zu wiederholen 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 zu wä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.

1

Ausgezeichnete 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>
1
Tristan Reid

Ich habe dies nach dem Aktualisieren eines Registers verwendet und den Status der Anforderung über ajax geändert. Dann führe ich eine Abfrage mit dem neuen Status im selben Skript aus und setzte es 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.

0
user7071893

Nach langem Suchen versuchte ich @kzh auf der Auswahlliste, wo ich nur option innerer Text nicht value-Attribut, Dieser Code auf der Grundlage der Auswahlantwort wusste Seite urlauf diesem Format 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>

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

0
Salem