Подтвердить что ты не робот

Как выбрать значение в раскрывающемся javascript?

У меня есть drop down, как это

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected="">Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

Я использую эту строку, чтобы выбрать значение, которое оно работает в Mozilla, а не в IE? Почему он не работает?

var element = document.getElementById("Mobility");
element.value = "10";
4b9b3361

Ответ 1

Используйте свойство selectedIndex:

document.getElementById("Mobility").selectedIndex = 12; //Option 10

Альтернативный метод:

Прокрутите каждое значение:

//Get select object
var objSelect = document.getElementById("Mobility");

//Set selected
setSelectedValue(objSelect, "10");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

Ответ 2

Самый простой способ - просто использовать этот

document.getElementById("mySelect").value = "banana";

myselect - это имя вашего выпадающего банана, это всего лишь один из элементов в раскрывающемся списке

Ответ 3

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

Где s - выпадающее меню, а v - значение

Ответ 4

Самое простое решение, если вы знаете значение

document.querySelector('option[value=" + value +"]').selected = true

Ответ 6

Я понимаю, что это старый вопрос, но я выложу решение для моего варианта использования, если другие столкнутся с той же ситуацией, что и при реализации ответа Джеймса Хилла ( выше).

Я нашел этот вопрос, пытаясь решить ту же проблему. Ответ Джеймса дал мне 90%. Однако для моего варианта использования выбор элемента из раскрывающегося списка также вызвал действие на странице из выпадающего меню onchange. код Джеймса, как написано, не инициировал это событие (по крайней мере, в Firefox, который я тестировал). В результате я сделал следующие незначительные изменения:

function setSelectedValue(object, value) {
    for (var i = 0; i < object.options.length; i++) {
        if (object.options[i].text === value) {
            object.options[i].selected = true;
            object.onchange();
            return;
        }
    }

    // Throw exception if option `value` not found.
    var tag = object.nodeName;
    var str = "Option '" + value + "' not found";

    if (object.id != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@id='" + object.id + "']."
    }

    else if (object.name != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@name='" + object.name + "']."
    }

    else {
        str += "."
    }

    throw str;
}

Обратите внимание на вызов object.onchange(), который я добавил в исходное решение. Это вызывает обработчик, чтобы убедиться, что действие на странице происходит.

Изменить

Добавлен код для исключения, если параметр value не найден; это необходимо для моего использования.

Ответ 7

Используя Javascript:

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

Используя Jquery:

$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list

Ответ 8

Да. Как упоминалось в сообщениях, свойство value нестандартно и не работает с IE. Для этого вам нужно использовать свойство selectedIndex. Вы можете обратиться к ссылке DOM w3schools, чтобы увидеть свойства элементов HTML. Следующая ссылка предоставит вам список свойств, с которыми вы можете работать в элементе select.

http://www.w3schools.com/jsref/dom_obj_select.asp

Обновление

Это не поддерживалось в течение 2011 года в IE. Как прокомментировал finnTheHuman, он поддерживается в настоящее время.

Ответ 9

Вместо того, чтобы делать

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

Я решил эту проблему, сделав это

function setSelectedValue(dropDownList, valueToSet) {
    var option = dropDownList.firstChild;
    for (var i = 0; i < dropDownList.length; i++) {
        if (option.text.trim().toLowerCase() == valueToSet.trim().toLowerCase()) {
            option.selected = true;
            return;
        }
        option = option.nextElementSibling;
    }
}

Если вы работаете со строками, вы должны использовать метод .trim(), иногда пробелы могут вызвать проблемы, и их трудно обнаружить в сеансах отладки javascript.

dropDownList.firstChild будет вашим первым тегом option. Затем, выполнив option.nextElementSibling, вы можете перейти к следующему тегу option, поэтому следующий выбор в элементе dropdownlist. Если вы хотите получить количество тегов option, вы можете использовать dropDownList.length, который я использовал в цикле for.

Надеюсь, это поможет кому-то.

Ответ 10

Используя немного ES6:

Сначала получите параметры, отфильтруйте значение на основе параметра и установите для выбранного атрибута значение true.

window.onload = () => {

  Array.from(document.querySelector('#Mobility').options)
    .filter(x => x.value === "12")[0]
    .setAttribute('selected', true);

};
<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected disabled>Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

Ответ 11

Вы можете решить это с помощью Javascript, например:

var newValue = "testing";
document.getElementById('id_Of_the_select_tag').value = value;

Или с Jquery, как это:

var newValue = "testing";

$("#id_Of_the_select_tag").val(newValue);