将 JavaScript 数组转换为下拉列表 - jQuery

converting javascript array to a dropdown - jquery

本文关键字：下拉列表 jQuery 转换 JavaScript 数组      更新时间：2023-09-26

我想创建动态下拉列表，其中的值根据第一个下拉列表进行更改。

假设我有一个包含三个值的下拉列表，即 One 、Two 和 Three 。

当我选择One.我有一个javascript数组，该数组中的值需要显示为网页中的第二个下拉列表。

这是小提琴。

我不知道从哪里开始或如何开始。

我

用谷歌搜索，我得到的结果是使用 ul 而不是来自 javascript 数组创建一个下拉列表。

任何帮助都将对我克服这个问题非常有帮助。

卡了2天，我仍然不知道该怎么做。

提前谢谢。

这可以

改进，但这应该为你指明正确的方向。这是 js 小提琴

<script src='jquery.js'></script>
<select class="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="dropdown2">
</select>
<script>
$(document).ready(function() {
  var dropdown2 = {
    1 : ['Four', 'Five', 'Six'],
    2 : ['Seven', 'Eight', 'Nine'],
    3 : ['Ten', 'Eleven', 'Twelve']
  }
  $('.dropdown').on('change',function() {
    $('.dropdown2').html(
      '<option>'+dropdown2[$(this).val()].join('</option><option>')+'</option>'
    );
  });
});
</script>

http://jsfiddle.net/tcTwL/5/

var data = {
    one: ['Four', 'Five', 'Six'],
    two: ['Seven', 'Eight', 'Nine'],
    three: ['Ten', 'Eleven', 'Twelve']
}
$('.dropdown').change(function () {
  $('.dropdown2').remove();
  var newSel = $(this).after('<select class="dropdown2" />'); 
  var option = $('.dropdown').find(":selected").text();
  data[option.toLowerCase()].forEach(function(opt){$('.dropdown2').append('<option>' + opt + '</option>')});
})

相当简单。 删除创建的任何旧下拉列表，获取选项值，然后添加新选项。这有点啰嗦，但它有效。

检查这个演示 jsFiddle

jQuery

$(document).ready(function() {
    var dropdown1 = {
        1 : ['Four', 'Five', 'Six'],
        2 : ['Seven', 'Eight', 'Nine'],
        3 : ['Ten', 'Eleven', 'Twelve']
    }
    $('.dropdown1').html(
            '<option>'+dropdown1[1].join('</option><option>')+'</option>'
        );
    $('.dropdown').on('change',function() {
        $('.dropdown1').html(
            '<option>'+dropdown1[$(this).val()].join('</option><option>')+'</option>'
        );
    });
});

.HTML

<select class="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="dropdown1">
相关文章：