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

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

jquery arrays object

Jquery 从对象数组创建选择器菜单,jquery,arrays,object,Jquery,Arrays,Object,我试图从OJBECT数组中创建一个选择器菜单。以下是该对象的示例： 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", distr

我试图从OJBECT数组中创建一个选择器菜单。以下是该对象的示例：

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>


for（设i=0；i0）{
$（“#列出的#U州”）.append（州[i]。州+”+州[i]。地区）；
console.log（states[i].state+“”+states[i].district）；
}
}
在这里找到你的地区

在触发加载带有_目标的url后，我将向其添加一个.change（）函数。

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

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));
    }
  }
});

$（文档）.ready（函数（）{
for（让i=0；i0）{
变量选项=$（“”{
文本：州[i]。州+“”+州[i]。地区，
值：states[i].id
});
$（“#列出的#州”）。追加（$（选项））；
}
}
});

不要忘记包装在

$（document）.ready中追加选项的代码，以便在执行之前等待加载DOM（因为您是在追加DOM中的元素）
这里是一个小提琴演示：
您应该附加到select元素，而不是选项。您还需要在jQuery中创建option元素
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));
    }
  }
});

$（文档）.ready（函数（）{
for（设i=0；i0）{
变量选项=$（“”{
文本：州[i]。州+“”+州[i]。地区，
值：states[i].id
});
$（“#列出的#州”）。追加（$（选项））；
}
}
});

不要忘记包装在$（document）.ready中追加选项的代码，以便在执行之前等待加载DOM（因为您是在追加DOM中的元素）
这是一个小提琴演示：
一些问题：

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

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

let states=[{id:1，state:“阿拉巴马”，district:“1st district”，url:“阿拉巴马”，district:“2nd district”，url:“阿拉巴马”，url:“阿拉巴马”，district:“3rd district”，url:“阿拉巴马”，district:“1st.pdf”}，{id:4，state:“阿拉巴马”，district:“4rd:“4rd district”，url:“阿拉巴马，state:“阿拉巴马”，地区：“第5区”，url:“阿拉巴马州”，地区：“第6区”，url:“阿拉巴马州”，地区：“第6区”，url:“阿拉巴马州”，地区：“第7区”，url:“阿拉巴马州”，地区：“第7区”，url:“阿拉巴马州”，地区：“全州地区”，url:“阿拉巴马州”，地区：“全州地区”，url:“阿拉巴马州，地区：“亚利桑那州”，地区：“第一区”，url:“Arizona_1st.pdf”}，{id:11，州：“Arizona”，区：“第二区”，url:“Arizona.2nd.pdf”}，{id:12，州：“Arizona”，区：“第三区”，url:“Arizona_3rd.pdf”}；
$（函数（）{
$（“#美国上市州”）。追加(
$.map（状态，函数（状态）{
返回$（''）.text（state.state+''+state.district）；
})
);
})；

在这里找到你的地区
一些问题：

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

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

let states=[{id:1，state:“阿拉巴马”，district:“1st district”，url:“阿拉巴马”，district:“2nd district”，url:“Alabama:”1st.pdf“}，{id:3，state:”阿拉巴马”，district:”3rd:”url:”阿拉巴马州，district:”4th district:”阿拉巴马州，district:”阿拉巴马州，{id:5，state:”阿拉巴马州，地区：“第5区”，url:“阿拉巴马州”，地区：“第6区”，url:“阿拉巴马州”，地区：“第6区”，url:“阿拉巴马州”，地区：“第7区”，url:“阿拉巴马州”，地区：“第7区”，url:“阿拉巴马州”，地区：“全州区”，url:“阿拉巴马州”，地区：“全州区”，url:“阿拉巴马州，地区：“亚利桑那州”，地区：“第一区”，url:“Arizona_1st.pdf”}，{id:11，州：“Arizona”，区：“第二区”，url:“Arizona.2nd.pdf”}，{id:12，州：“Arizona”，区：“第三区”，url:“Arizona_3rd.pdf”}；
$（函数（）{
$（“#美国上市州”）。追加(
$.map（状态，函数（状态）{
返回$（''）.text（state.state+''+state.district）；
})
);
})；

在这里找到你的地区
将js代码移动到
之前的一行，或使用$（文档）。ready（）
，选中将js代码移动到
之前的一行，或使用$（文档）。ready（）
，检查一下你是thebomb.com！谢谢你的帮助。效果很好。我以前在Ruby中做过类似的操作，但将id添加到了我的选项中，并且成功了。你知道为什么它必须在“选择”上，而不是在“选项”上吗？@OsuDani:如果你在选项上添加了内容，你就是在添加具有id的选项。你知道吗