如何在jQuery selectmenu中预选一个选项？

Question

我有一个动态填充的jQuery UI selectmenu ，因此我没有选择其中一个选项设置“ selected”属性的选项。

for (var i = 0; i < Data.length; i++) 
{
$("#ListID").append($("<option></option>").val(Data[i].ColorName).html(Data[i].ColorName));
}

另外，我尝试了各种其他方法来将值设置为选定的值，例如：

1. $('#ListID').val(Data[0].ColorName); 没用

2. $("#ListID[value='" + Data[0].ColorName + "']").attr('selected', 'selected'); 没用

3. $('#ListID').selectmenu("refresh"); <=这显示了最后一个值，但仍未选择，因为提交时它显示空白值

所以，我应该如何在选择selectmenu预先选择数组的第一个元素（即第0个元素）中的选项

问题在于，它总是迫使用户从下拉菜单中选择一个选项，否则它会在提交时显示空白值，因为我正在预选一个值，所以情况并非如此。

Answer 1

尝试这个：

for (var i = 0; i < Data.length; i++) 
{
   $("#ListID").append("<option value='"+Data[i].ColorName+"' "+(i == 0 ? "selected":"")+">"+Data[i].ColorName+"</option>");
}

要么

for (var i = 0; i < Data.length; i++) 
{
    $("#ListID").append($("<option "+(i == 0 ? "selected":"")+"></option>").val(Data[i].ColorName).html(Data[i].ColorName));
}

在要选择的选项上使用selected。

Answer 2

我只是通过选择一系列颜色来进行简单选择，请从这里获得您的想法，让我知道它是否有效。

  $("#ListID").selectmenu(); var Data = [{ColorName:"orange"},{ColorName:"blue"},{ColorName:"green"},{ColorName:"red"}]; var selected = "blue"; for (var i = 0; i < Data.length; i++) { var select = ''; if(selected==Data[i].ColorName){ select = "selected=selected"; } $("#ListID").append($("<option "+select+"></option>").val(Data[i].ColorName).html(Data[i].ColorName)); } $("#ListID").selectmenu("refresh"); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <select id="ListID"> </select> 

Answer 3

让我们尝试这个选择。

<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

例如，我们要在jquery中动态选择奔驰。

$("#cars option[value='mercedes']").prop('selected', true);

option [value ='']是选择器。

jsfiddle： https ://jsfiddle.net/onurgule/t4obc56s/

jQuery UI提琴： https : //jsfiddle.net/onurgule/p44mta9e/