Question

我想问你，如何使用jQuery在下拉列表中实现元素。我有下面的代码。

我想通过单击按钮来实现<option value="fiat">Fiat</option>">元素。但是，该代码将不起作用。我也尝试使用.html()和.replaceWith()函数，但是它也不起作用。有人有主意吗？

$(document).ready(function(){
  $("#btn1").click(function(){
    $("select").append("<option value="fiat">Fiat</option>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

<button id="btn1">Add option element</button>

Answer 1

您需要将选项附加到选择列表，还需要在字符串周围使用单引号，并在字符串内部使用双引号。

在以下代码段中-如果打开选择列表-您将看到“菲亚特”不存在-如果单击按钮，则为n-按预期将其添加到选择列表选项中。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#mySelectList").append('<option value="fiat">Fiat</option>');
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelectList">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

<button id="btn1">Add option element</button>

Answer 2

在您的代码中

$(document).ready(function(){
  $("#btn1").click(function(){
    $("select").append("<option value="fiat">Fiat</option>");
  });
});

您使用双引号确定要附加的内容。但是，双引号在 fiat 之前关闭，因此引擎希望在其中包含一些JS代码，例如关闭括号。您将需要改变您的字符串包围

'<option value="fiat">Fiat</option>'

使用模板文字

`<option value="fiat">Fiat</option>`

或在字符串中转义双引号

"<option value=\"fiat\">Fiat</option>"

编辑

添加变量并不难，您可以这样做：

var options = `
    <option value="first">First</option>
    <option value="second">Second</option>
    <option value="third">Third</option>
`;

然后

$("select").append(options);

但是，建议给您的id使用class或select，并在选择器中使用它而不是标签名称，除非您要为所有选项添加选项select标签。

添加选项以使用jQuery

2 个答案: