Как изменить <select> значение из JavaScript

У меня вопрос, который кажется очень простым, но я просто не могу понять. У меня есть <select> со списком опций и значением по умолчанию. После того, как пользователь выберет опцию и нажимает на кнопку, я хочу, чтобы выбор возвращался к своему значению по умолчанию.

<select id="select">
 <option value="defaultValue">Default</option>
 <option value="Option1">Option1</option>
 <option value="Option2">Option2</option>    
</select>
<input type="button" value="CHANGE" onclick="selectFunction()" />

Поэтому давайте предположим, что пользователь выбирает вариант 1. Я получаю это значение с помощью javascript, но после этого я хочу, чтобы select снова показывал "Default".

Я обнаружил, что выполнение document.getElementById("select").value = "defaultValue" не будет работать.

Кто-нибудь знает, как изменить это значение на значение по умолчанию?

Ответ 1

Установка .value к значению одного из вариантов работает на всех неопределенно современных браузерах. В очень старых браузерах вам приходилось устанавливать selectedIndex:

document.getElementById("select").selectedIndex = 0;

Если ни тот, ни ваш исходный код не работают, я задаюсь вопросом, можете ли вы использовать IE и иметь что-то еще на странице, создавая что-то, называемое "select"? (Или как name или как глобальная переменная?) Поскольку некоторые версии IE имеют проблему, когда они объединяют пространства имен. Попробуйте изменить id select на "fluglehorn", и если это сработает, вы знаете, что проблема.

Ответ 2

document.getElementById("select").selectedIndex = 0 будет работать

Ответ 3

Я обнаружил, что выполнение document.getElementById("select").value = "defaultValue" работает.

Вы должны испытывать отдельную ошибку, так как это прекрасно работает в этой живой демонстрации.

И здесь полный рабочий код, если вы заинтересованы:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        var selectFunction = function() {
            document.getElementById("select").value = "defaultValue";
        };
    </script>
</head>
<body>
    <select id="select">
        <option value="defaultValue">Default</option>
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>    
    </select>
    <input type="button" value="CHANGE" onclick="selectFunction()" />
</body>
</html>

Ответ 4

После того, как вы сделали свою обработку в selectFunction(), вы можете сделать следующее

document.getElementById('select').selectedIndex = 0;
document.getElementById('select').value = 'Default';

Ответ 5

$('#select').val('defaultValue'); 
$('#select').change();

Это также вызовет события, подключенные к этому выбору

Ответ 6

Если вы хотите, чтобы он вернулся к первому варианту, попробуйте это:

   document.getElementById("select").selectedIndex = 0;

Ответ 7

 <script language="javascript" type="text/javascript">
        function selectFunction() {
             var printStr = document.getElementById("select").options[0].value
            alert(printStr);
            document.getElementById("select").selectedIndex = 0;
        }
    </script>

Ответ 8

Я думаю, что я знаю, в чем проблема, если вы пытаетесь выбрать вариант, который не существует, он не будет работать. Вам нужно сначала добавить параметр. Вот так:

var option=document.createElement("option");
option.text=document.getElementById('other_referee').value
document.getElementById('referee_new').add(option,null);
document.getElementById('referee_new').value = document.getElementById('other_referee').value;

Не изящно, но вы поняли.

Ответ 9

Вы можете использовать свойство selectedIndex, чтобы установить его в первый параметр:

document.getElementById("select").selectedIndex = 0;