В моем HTML у меня есть <select>
три <option>
элемента. Я хочу использовать jQuery для проверки значения каждого параметра в сравнении с Javascript var
. Если он совпадает, я хочу установить выбранный атрибут этой опции. Как бы я это сделал?
В моем HTML у меня есть <select>
три <option>
элемента. Я хочу использовать jQuery для проверки значения каждого параметра в сравнении с Javascript var
. Если он совпадает, я хочу установить выбранный атрибут этой опции. Как бы я это сделал?
Ответы:
Используя старый добрый 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 id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
С jquery было бы:
$('#state').val('AK').change();
Вы можете изменить значение элемента select, который изменяет выбранный параметр на вариант с этим значением, используя JavaScript:
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
}
});
Я хочу изменить значение выбранного параметра элемента text & 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>
Отличные ответы - вот версия D3 для тех, кто ищет:
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<script>
d3.select('#sel').property('value', 'Fish');
</script>
Я использовал почти все ответы, опубликованные здесь, но мне это было не по вкусу, поэтому я выкопал еще один шаг и нашел простое решение, которое соответствует моим потребностям, и чувствую, что стоит поделиться с вами, ребята.
Вместо итерации по всем опциям или использования 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.
После долгих поисков я попробовал @kzh в списке выбора, где я знаю только option
внутренний текст, а не 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, затем я делаю запрос с новым состоянием в том же скрипте и помещаю его в элемент выбора нового тега в новое состояние, чтобы обновить представление.
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()