Benim HTML, <select> <option> bir elemanları var. JQuery bir Javascript var karşı her seçeneğin değeri kontrol etmek için kullanmak istiyorum. Eğer bir maç varsa, bu seçenek seçili özniteliği ayarlamak istiyorum. Bunu nasıl yapacağım?

Vanilya JavaScript

Eski düz JavaScript kullanarak:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    var val = "Fish";
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j  ) {
        if(opt.value == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

Demo

bir WordPress kullanmak

Ama eğer sengerçektenjQuery kullanmak istiyorum:

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

Demo

jQuery - Değeri Kullanarak Bağlıyor

Durumda seçeneklerinizi metin içerikleri farklı olan değer nitelik ve metin içeriği ile seçmek istediğiniz:

<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

Ama yukarıda ayarlayın ve değeri jQuery kullanarak seçmek istediğiniz varsa, daha önce olduğu gibi yapabilirsiniz:

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

Modern DOM

document.querySelector HTMLOptionElement::selected özelliğini destekleyen tarayıcılar için, bu görevi yerine getirmeye daha kısa ve öz bir şekilde

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

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

Demo