Question

我正在尝试从一组ojbects创建一个选择器菜单。以下是该对象的示例：

let states = [
      {id: 1, state: "Alabama", district: "1st District", url:"Alabama_1st.pdf"},
      {id: 2, state: "Alabama", district: "2nd District", url:"Alabama_1st.pdf"},
      {id: 3, state: "Alabama", district: "3rd District", url:"Alabama_1st.pdf"},
      {id: 4, state: "Alabama", district: "4th District", url:"Alabama_1st.pdf"},
      {id: 5, state: "Alabama", district: "5th District", url:"Alabama_1st.pdf"},
      {id: 6, state: "Alabama", district: "6th District", url:"Alabama_1st.pdf"},
      {id: 7, state: "Alabama", district: "7th District", url:"Alabama_1st.pdf"},
      {id: 9, state: "Alaska", district: "Statewide District", url:"Alaska_1st.pdf"},
      {id: 10, state: "Arizona", district: "1st District", url:"Arizona_1st.pdf"},
      {id: 11, state: "Arizona", district: "2nd District", url:"Arizona.2nd.pdf"},
      {id: 12, state: "Arizona", district: "3rd District", url:"Arizona_3rd.pdf"},

到目前为止，我有以下jQuery，但我正在努力让states.state和states.district填充到我的选择器菜单中。我的控制台日志恢复正常，所以我知道我正在访问数据，只是无法将其附加到我的选择器菜单。

<script>         
        for(let i = 0; i < states.length; i++) {
           if(states[i].id > 0){
             $("#listed_states").append(states[i].state +" "+ states[i].district);
              console.log(states[i].state +" "+ states[i].district);
            }
          }
</script>

<body>

    <select>
      <option>Find Your District Here<option>
      <option id="listed_states"> <option>
    </select>
</body>

我将在触发加载带有_target的网址后向其添加.change（）函数。

Answer 1

您应该附加到select元素，而不是选项。您还需要在jQuery中创建选项元素。

<强> HTML

<select id="listed_states">
  <option>Find Your District Here</option>
</select>

<强>的jQuery

$(document).ready(function() {
  for (let i = 0; i < states.length; i++) {
    if (states[i].id > 0) {
      var option = $("<option>", {
        text: states[i].state + " " + states[i].district,
        value: states[i].id
      });
      $('#listed_states').append($(option));
    }
  }
});

不要忘记将附加在$(document).ready中的选项的代码包装起来，以便在执行之前等待DOM加载（因为您要附加到DOM中的元素）

这是一个小提琴演示：https://jsfiddle.net/zephyr_hex/bztgwubf/

Answer 2

一些问题：

id应位于select元素上，而不应放在您不需要的option元素上。
option代码没有结束标记：您实际上每次都打开第二个
代码应在文档加载后执行
您需要将文本包装在option标记

您可以使用append一次，并为其提供一个数组：

＆＃13;

let states = [ {id: 1, state: "Alabama", district: "1st District", url:"Alabama_1st.pdf"}, {id: 2, state: "Alabama", district: "2nd District", url:"Alabama_1st.pdf"}, {id: 3, state: "Alabama", district: "3rd District", url:"Alabama_1st.pdf"}, {id: 4, state: "Alabama", district: "4th District", url:"Alabama_1st.pdf"}, {id: 5, state: "Alabama", district: "5th District", url:"Alabama_1st.pdf"}, {id: 6, state: "Alabama", district: "6th District", url:"Alabama_1st.pdf"}, {id: 7, state: "Alabama", district: "7th District", url:"Alabama_1st.pdf"}, {id: 9, state: "Alaska", district: "Statewide District", url:"Alaska_1st.pdf"}, {id: 10, state: "Arizona", district: "1st District", url:"Arizona_1st.pdf"}, {id: 11, state: "Arizona", district: "2nd District", url:"Arizona.2nd.pdf"}, {id: 12, state: "Arizona", district: "3rd District", url:"Arizona_3rd.pdf"}];

$(function () {      
    $("#listed_states").append(
        $.map(states, function (state) {
            return $('<option>').text(state.state + " " + state.district);
        })
    );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="listed_states">
    <option>Find Your District Here</option>
</select>

＆＃13;

从对象数组创建选择器菜单

2 个答案: