回答:
プレーンな古い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を使用したい場合：
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});
オプションにテキストコンテンツとは異なる値属性があり、テキストコンテンツを介して選択する場合：
<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>
しかし、上記の設定があり、jQueryを使用して値で選択したい場合は、以前と同じように行うことができます。
var val = 3;
$('#sel').val(val);
document.querySelectorとHTMLOptionElement::selectedプロパティをサポートするブラウザの場合、これはこのタスクを実行するより簡潔な方法です。
var val = 3;
document.querySelector('#sel [value="' + val + '"]').selected = true;
<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>
<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>注：これは、最終的な安定版リリースでは更新されていません。
<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><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>document.evaluate(".//select[@id='sel']/option[text()='Fish']", document.body, null, 9, null).singleNodeValue.selected = true;
ここでjqueryを使用する例はどれも実際には正しくありません。値が変更されていても、selectが最初のエントリを表示したままになるためです。
アラスカを選択し、selectが正しいアイテムを選択したとおりに表示する正しい方法：
<select id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>jqueryの場合：
$('#state').val('AK').change();JavaScriptを使用して、select要素の値を変更できます。これにより、選択されたオプションがその値を持つオプションに変更されます。
document.getElementById('sel').value = 'bike';<select id="my_select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>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
}
});select要素のselectedオプションのvalueとtextContent（表示されているもの）の両方を「Mango」に変更したいと思います。
機能した最も単純なコードは以下のとおりです。
var newValue1 = 'Mango'
var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;それが誰かを助けることを願っています。幸運を祈ります。
これがあなたを助けたなら賛成票を投じてください。
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;
}
});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;
}
});<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>私はここに投稿された回答のほとんどすべてを使用しましたが、それには満足していなかったので、一歩先を掘り下げて、私のニーズに合った簡単な解決策を見つけ、皆さんと共有する価値があると感じました。
オプション全体を反復したり、JQueryを使用したりする代わりに、コアJSを使用して簡単な手順で実行できます。
例
<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>したがって、選択するオプションの値を知っている必要があります。
function selectOrganization(id){
org_list=document.getElementById('org_list');
org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}使い方？
selectOrganization(25); //this will select SONY from option Listあなたのコメントは大歓迎です。:) AzmatHunzai。
多くの検索の後、属性でoptionはなく内部テキストのみを知っている選択リストで@kzhを試しvalueました。選択回答に基づくこのコードはurl、このフォーマットの
現在のページに従って選択オプションを変更するために使用しました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>これurlにより、選択したパラメータが表示されたままになり、ユーザーフレンドリーになり、訪問者は現在表示しているページまたはプロファイルを把握できます。
レジスタを更新してajax経由でリクエストの状態を変更した後、これを使用してから、同じスクリプトで新しい状態でクエリを実行し、selectタグ要素の新しい状態に入れてビューを更新しました。
var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;これがお役に立てば幸いです。
少しすっきりとしたVanilla.JSバージョン。あなたがすでにnodeList欠けているのを修正したと仮定すると.forEach()：
NodeList.prototype.forEach = Array.prototype.forEachただ：
var requiredValue = 'i-50332a31',
selectBox = document.querySelector('select')
selectBox.childNodes.forEach(function(element, index){
if ( element.value === requiredValue ) {
selectBox.selectedIndex = index
}
})
$('#myselectid').val()