Как установить selectIndex элемента select, используя отображаемый текст в качестве ссылки?
Пример:
<input id="AnimalToFind" type="text" />
<select id="Animals">
<option value="0">Chicken</option>
<option value="1">Crocodile</option>
<option value="2">Monkey</option>
</select>
<input type="button" onclick="SelectAnimal()" />
<script type="text/javascript">
function SelectAnimal()
{
//Set selected option of Animals based on AnimalToFind value...
}
</script>
Есть ли другой способ сделать это без цикла? Вы знаете, я думаю о встроенном JavaScript-коде или что-то в этом роде. Кроме того, я не использую jQuery...
Попробуйте следующее:
function SelectAnimal() {
var sel = document.getElementById('Animals');
var val = document.getElementById('AnimalToFind').value;
for(var i = 0, j = sel.options.length; i < j; ++i) {
if(sel.options[i].innerHTML === val) {
sel.selectedIndex = i;
break;
}
}
}
<script type="text/javascript">
function SelectAnimal(){
//Set selected option of Animals based on AnimalToFind value...
var animalTofind = document.getElementById('AnimalToFind');
var selection = document.getElementById('Animals');
// select element
for(var i=0;i<selection.options.length;i++){
if (selection.options[i].innerHTML == animalTofind.value) {
selection.selectedIndex = i;
break;
}
}
}
</script>
настройка свойства selectedIndex тега select выберет правильный элемент. это хорошая идея вместо сравнения двух значений (параметры innerHTML && animal value), вы можете использовать метод indexOf() или регулярное выражение для выбора правильной опции, несмотря на обсадку или наличие пробелов
selection.options[i].innerHTML.indexOf(animalTofind.value) != -1;
или используя .match(/regular expression/)
Попробуйте следующее:
function SelectAnimal()
{
var animals = document.getElementById('Animals');
var animalsToFind = document.getElementById('AnimalToFind');
// get the options length
var len = animals.options.length;
for(i = 0; i < len; i++)
{
// check the current option text if it the same with the input box
if (animals.options[i].innerHTML == animalsToFind.value)
{
animals.selectedIndex = i;
break;
}
}
}
Вы можете установить индекс по этому коду:
sel.selectedIndex = 0;
но помните осторожность в этой практике. Вы не сможете вызвать метод onclick на стороне сервера, если вы выберете предыдущее значение, выбранное в раскрывающемся списке.
Добавьте атрибут имени в свой параметр:
<option value="0" name="Chicken">Chicken</option>
С этим вы можете использовать значение HTMLOptionsCollection.namedItem( "Цыпленок" ) для установки значения вашего элемента select.
Если вы хотите это без циклов или jquery, вы можете использовать следующее. Это прямо вверх JavaScript. Это работает для текущих веб-браузеров. Учитывая возраст вопроса, я не уверен, что это сработало бы в 2011 году. Обратите внимание, что использование селекторов стиля css чрезвычайно мощное и может помочь сократить много кода.
// Please note that querySelectorAll will return a match for
// for the term...if there is more than one then you will
// have to loop through the returned object
var selectAnimal = function() {
var animals = document.getElementById('animal');
if (animals) {
var x = animals.querySelectorAll('option[value="frog"]');
if (x.length === 1) {
console.log(x[0].index);
animals.selectedIndex = x[0].index;
}
}
}<html>
<head>
<title>Test without loop or jquery</title>
</head>
<body>
<label>Animal to select
<select id='animal'>
<option value='nothing'></option>
<option value='dog'>dog</option>
<option value='cat'>cat</option>
<option value='mouse'>mouse</option>
<option value='rat'>rat</option>
<option value='frog'>frog</option>
<option value='horse'>horse</option>
</select>
</label>
<button onclick="selectAnimal()">Click to select animal</button>
</body>
</html>Вы можете использовать HTMLOptionsCollection.namedItem() Это означает, что вы должны определить свои параметры выбора, чтобы иметь атрибут имени и иметь значение отображаемого текста. например Калифорния