使用 jquery 动态更改下拉列表的内容答案

【问题标题】：Dynamically changing the content of dropdown using jquery使用 jquery 动态更改下拉列表的内容
【发布时间】：2020-10-28 02:40:09
【问题描述】：

我对 jQuery 很陌生。我想从给定的 URL 设置下拉列表的内容。假设一个下拉列表如下：

<!--filter1-->
  <h4>City Filter1</h4>
    <select id="filter1">
    <option>--Select--</option>
  </select>

  <!--filter2-->
  <h4>City Filter2</h4>
  <input type="Checkbox" class="filter2">Value1<br/>
  <input type="Checkbox" class="filter2">Value2<br/>
  <input type="Checkbox" class="filter2">Value3<br/>
  <input type="Checkbox" class="filter2">Value4<br/>

  <!--filter3-->
  <h4>City Filter3</h4>
  <input type="Checkbox" class="filter3">Value1<br/>
  <input type="Checkbox" class="filter3">Value2<br/>
  <input type="Checkbox" class="filter3">Value3<br/>
  <input type="Checkbox" class="filter3">Value4<br/>

<input type="Checkbox" class="filter2"><br/>

在此之后，我还想更改 filter2 和 filter3 复选框的内容。我不知道该怎么做，因为我对 jquery 很陌生。

【问题讨论】：

stackoverflow.com/questions/1801499/… 这能回答你的问题吗？
不，他们使用的是本地数组，而我必须从远程服务器填写下拉列表。
从哪里获取数据并不重要。填充选择输入的过程相同。一个只是在 ajax 完成后发生。
好的，你能解释一下我如何使用ajax来填充它。我已从服务器检索数据，但我不知道如何将该数据填充到此下拉列表中。假设一个数组被给出为：{"1":"Value","2":"Value2"} etc.
Ajax有一个成功回调，你可以试试把上面问题中的代码放到那个成功回调中

标签： javascript php html jquery css

【解决方案1】：

您可以使用 ajax 和一些 jquery 来实现此目的

$.ajax({url: "http://Your_Sexy_Url.com", success: function(result){

    //Here you can process your response from url
    $("select").html(""); // remove old options from select
    var options = "";
    $.each(data, function(index) {
        var row = data[index];
        options += "<option>"+row+"</option>"
    });
    $("select").html(options); // add new options to select

}});

同样你也可以更新input[type=checkbox]

【讨论】：

非常感谢您的帮助。
@Student18 如果您觉得有帮助，请接受此答案?