Установите значение параметра как выбрано

Question

Я хотел бы загрузить окно выбора, в котором автоматически будет отображаться выбранное пользователем значение.

Я получаю данные Json с сервера с информацией о пользователе. выборки данных: {"color":"red"}

В моем HTML коде есть вариант выбора, как это:

<select id="input_user" class="selectinput" disabled="true"> 
<option value="n/a"> n/a </option> 
<option value="red"> red </option> 
<option value="green"> green </option> 
<option value="yellow"> yellow </option> 
<option value="blue"> blue </option> 
<option value="white"> white </option> 
</select> //this will only show "n/a" as default 

Я попробовал этот код, чтобы сделать красное значение по умолчанию, но не работает.

var user_color= data[2].color; // this was from the json data 
document.getElementById('input_user').selectedIndex = user_color; 

Любая помощь?

Answer 1

Как вы добавили этот вопрос с JQuery вы можете просто установить val() на select непосредственно:

var user_color = 'red'; //data[2].color; 
 
$('#input_user').val(user_color);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="input_user" class="selectinput" disabled="true"> 
 
    <option value="n/a">n/a</option> 
 
    <option value="red">red</option> 
 
    <option value="green">green</option> 
 
    <option value="yellow">yellow</option> 
 
    <option value="blue">blue</option> 
 
    <option value="white">white</option> 
 
</select>

Answer 2

после долгих исследований, я, наконец, вернулся, чтобы увидеть документацию JQuery что дал мне правильный ответ:

1/Удалить все атрибуты тегов, которые уже имеют атрибут 'selected'

function remove_selected(){ 
    $("select option").removeAttr('selected'); 
} 

2/Я использую функцию опоры() в JQuery, чтобы присвоить 'выбранного атрибута' до нужного тега

// USE THE FUNCTION TO REMOVE ALL ATTRIBUTES ALREADY SELECTED 
remove_selected(); 

// Set the tag <option> attribute to 'selected' 
$('select option[value="ThatYouWant"]').prop({defaultSelected: true}); 

В HTML это дает:

<select> 
    <option value="something">Something</option> 
    <option value="ThatYouWant" selected>That you want</option> 
    <option value="OtherValue">Other value</option> 
</select> 

Это чистое и без заусенцев, спасибо за ваши отзывы и исправления, одобрите, если вы найдете это решение правильным. С уважением, Раф.

https://api.jquery.com/prop/