W moim kodzie HTML mam <select>
trzy <option>
elementy. Chcę użyć jQuery, aby sprawdzić wartość każdej opcji w JavaScript var
. Jeśli pasuje, chcę ustawić wybrany atrybut tej opcji. Jak bym to zrobił?
W moim kodzie HTML mam <select>
trzy <option>
elementy. Chcę użyć jQuery, aby sprawdzić wartość każdej opcji w JavaScript var
. Jeśli pasuje, chcę ustawić wybrany atrybut tej opcji. Jak bym to zrobił?
Odpowiedzi:
Używanie zwykłego starego 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>
Ale jeśli naprawdę chcesz używać jQuery:
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});
W przypadku, gdy opcje mają atrybuty wartości, które różnią się od zawartości tekstowej i chcesz wybrać za pomocą treści tekstowej:
<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>
Ale jeśli masz powyższe skonfigurowane i chcesz wybierać według wartości za pomocą jQuery, możesz zrobić tak jak poprzednio:
var val = 3;
$('#sel').val(val);
W przypadku przeglądarek, które obsługują document.querySelector
i tej HTMLOptionElement::selected
właściwości, jest to bardziej zwięzły sposób wykonania tego zadania:
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>
Uwaga: to nie zostało zaktualizowane w ostatecznej stabilnej wersji.
<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;
Żaden z przykładów używających jquery w tym miejscu nie jest w rzeczywistości poprawny, ponieważ pozostawi zaznaczenie wyświetlając pierwszy wpis, mimo że wartość została zmieniona.
Właściwy sposób, aby wybrać Alaskę i pokazać wybrany element, używając:
<select id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
Z jquery byłoby:
$('#state').val('AK').change();
Możesz zmienić wartość elementu select, który zmienia wybraną opcję na tę z tą wartością, używając 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
}
});
Chcę zmienić wybraną opcję zaznaczonego elementu zarówno wartość, jak i textContent (co widzimy) na „Mango”.
Najprostszy kod, który działał, znajduje się poniżej:
var newValue1 = 'Mango'
var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;
Mam nadzieję, że to komuś pomoże. Powodzenia.
Głosuj pozytywnie, jeśli ci to pomogło.
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>
Doskonałe odpowiedzi - oto wersja D3 dla każdego, kto szuka:
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<script>
d3.select('#sel').property('value', 'Fish');
</script>
Skorzystałem z prawie wszystkich zamieszczonych tutaj odpowiedzi, ale nie czułem się z tym komfortowo, więc poszedłem o krok dalej i znalazłem łatwe rozwiązanie, które pasuje do moich potrzeb i czuję, że warto się z wami podzielić.
Zamiast iteracji po wszystkich opcjach lub za pomocą JQuery , możesz zrobić używając core JS w prostych krokach:
Przykład
<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>
Musisz więc znać wartość opcji do wyboru.
function selectOrganization(id){
org_list=document.getElementById('org_list');
org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}
Jak używać?
selectOrganization(25); //this will select SONY from option List
Twoje komentarze są mile widziane. :) AzmatHunzai.
Po wielu poszukiwaniach próbowałem @kzh na liście wyboru, gdzie znam tylko option
tekst wewnętrzny, a nie value
atrybut, ten kod oparty na wybranej odpowiedzi Użyłem go do zmiany opcji wyboru zgodnie z bieżącą stroną url
w tym formacie
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>
Dzięki temu url
parametry wyświetlane jako wybrane, będą bardziej przyjazne dla użytkownika, a odwiedzający będzie wiedział, jaką stronę lub profil aktualnie przegląda.
Użyłem tego po zaktualizowaniu rejestru i zmianie stanu żądania przez ajax, a następnie wykonuję zapytanie z nowym stanem w tym samym skrypcie i umieszczam go w elemencie select tag w nowym stanie, aby zaktualizować widok.
var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;
Mam nadzieję, że to się przyda.
Nieco schludniejsza wersja Vanilla.JS. Zakładając, że już naprawiłeś nodeList
brakujące .forEach()
:
NodeList.prototype.forEach = Array.prototype.forEach
Właśnie:
var requiredValue = 'i-50332a31',
selectBox = document.querySelector('select')
selectBox.childNodes.forEach(function(element, index){
if ( element.value === requiredValue ) {
selectBox.selectedIndex = index
}
})
$('#myselectid').val()