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 /删除已经选择＆＃39;的标签的所有属性。属性

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

2 /我使用jQuery的prop（）函数来分配＆＃39;选择＆＃39;属性为所需的标签

// 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>

干净且没有毛刺，感谢您的反馈和更正，如果您发现此解决方案正确，请批准。此致，Raf。

来源：https://api.jquery.com/prop/

将选项值设置为选中

2 个答案: