如何使用 jQuery 3.3.1 设置 select 列表的选项

Question

我已经在这里尝试了之前问题的大部分答案，但我无法jQuery 将 select 列表中的选项设置为 selected。我确实得到并迭代了每个选项的文本。使用 jQuery 3.3.1.

HTML:

<select id="ddlRole" class="ddlRole" style="width:810px" multiple  size="6">
   <option value="-1">--DeSelect--</option>
   <option value="1">Administrator</option>
   <option value="2">Manager</option>
   <option value="3">User</option>
</select>

代码：

$('#ddlrole option').each(function ()                               
{
    //alert(" option text =" + this.text);
    for (i = 1; i < splitdata.length; i++)
    {
        if (splitdata[i] == $(this).text())
        {
            //this.prop("selected",true);
            //$(this).prop('selected', true);                                       $(this).attr("selected", "selected");
            alert("Searched text is found");
        }
    }
});

Answer 1

您的 select 标签中没有指定选项

    <select id="ddlRole" class="ddlRole" style="width:810px" multiple  size="6"></select>

更多关于什么是 splitdata 变量？它是未定义的

编辑：

试试这个：

splitdata = ["Administrator","Manager","User"]

$('#ddlRole option').each(function ()                               
{
        console.log(" option text =");
        for (i = 0; i < splitdata.length; i++)
        {
            if (splitdata[i] == $(this).text())
            { 
             $(this).attr("selected", "selected");
            }
        }
});

Answer 2

如果您的下拉菜单的值也相同，为什么不尝试将数组传递给 val() 方法？因为它会为您完成这项工作！

HTML:

<select id="ddlRole" class="ddlRole" style="width:810px" multiple  size="6">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
</select>

jQuery:

var splitdata = ['B', 'C', 'E'];
$('#ddlRole').val(splitdata);

JsFiddle

除此之外，我想指出几件事：

您的下拉元素的 ID 名称是 ddlRole，而在 jQuery 代码中，您使用的是 #ddlrole。
您的 FOR 循环从 1 开始。但是在数组中，第一个元素从第 0 个索引开始。

如何使用 jQuery 3.3.1 设置 select 列表的选项

How to set a select list's options with jQuery 3.3.1

jquery

html-select