Как сделать option в select :selected с помощью js?

Question

[leni_m]

<select id="select">
<option>Вася</option>
<option>Петя</option>
<option>Терпила</option>
</select>

var x = "Терпила";
Как сделать option :selected в зависимости от переменной x?

Answer 1

[Павел Корнилов]

<select id="select">
<option>Вася</option>
<option value=2>Петя</option>
<option>Терпила</option>
</select>

<script type="text/javascript">
var x=2;
document.getElementById('select').value= x;
</script>

Comments

[leni_m]

а без value="" не обойтись?

[Илья Агафонов]

leni_m, you should use JQuery like this:
$('#select').val(x);

[leni_m]

Илья Агафонов, I need use without value="" in

[Илья Агафонов]

leni_m, ну серьёзно, ты хочешь выставить _значение_ инпута не используя его аттрибут value? Оксюморон.

[leni_m]

Илья Агафонов, он есть, но он отличается от того, что внутри тега и не хочется 200+ опций переписывать вручную. А получаю я в переменную x именно не value, а то, что внутри.

[Илья Агафонов]

leni_m, по тексту внутри тега это извращение какое-то, но можно например так

$("#select option").filter(function() {
  return $(this).text() === text;
}).first().attr("value")

[leni_m]

Илья Агафонов, да у меня раньше input обычный был, теперь селект понадобилось сделать, в обработчике ковыряться не хочу, поэтому просто из селекта передаю в инпут type="hidden", а чтобы при неправильно заполненной форме, сохранялся селект, беру значение из инпута, и оно как раз такое, какое внутри тегов)

[Павел Корнилов]

Тогда так:

<select id="select">
<option>Вася</option>
<option>Петя</option>
<option>Терпила</option>
</select>

<script type="text/javascript">
var x= "Петя",
	sel= document.getElementById('select');

[].forEach.call(sel.children, function(i) {
	i.value= i.label;
});

sel.value = x;
</script>

Answer 2

[Vic Shóstak]

Лучше всего в форме, также, задавать значения value для каждого из option. Иначе, какое значение вы будете передавать при submit формы? Сделать это проще простого:

<select id="select">
    <option value="Вася">Вася</option>
    <option value="Петя">Петя</option>
    <option value="Терпила">Терпила</option>
</select>

А вот сам скрипт:

const select = document.querySelector('#select').getElementsByTagName('option');

for (let i = 0; i < select.length; i++) {
    if (select[i].value === 'Терпила') select[i].selected = true;
}

ADD:

Если, всё-таки, каким-то неведомым образом нужно обойтись без значения value в option, то условие в цикле нужно переписать на вот это:

for (let i = 0; i < select.length; i++) {
    if (select[i].textContent === 'Терпила') select[i].selected = true;
    // Или вот на это, если там присутствует html, например:
    // if (select[i].innerHTML === '<p>Терпила</p>') select[i].selected = true;
}

Comments

[leni_m]

да у меня значение селекта идет в инпут type="hidden"
просто понадобилось сделать селект, а обработчик уже готов, и не хочется там тоже ковыряться, раньше инпут был обычным а теперь селект сделать пришлось, а в нем названия стран, где есть value, но он например у России "RU", и не хочется для всех стран вручную переписывать. Нельзя ли вот что написано в option, то и передать?

[Vic Shóstak]

leni_m, добавил в основном ответе.

[leni_m]

Vikky Shostak, спасибо)

Answer 3

[NikitaShishkin]

Вот из-за таких ответов самому приходится вспоминать как это делается
$('select option:eq(0)').prop('selected',true)

В eq ставится номер нужного option начиная с 0, т.е X или X-1

Comments

[Владислав Надюк]

Спасибо, помог