将javascript数组转换为下拉列表-jquery

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

假设我有一个包含三个值的下拉列表，即

One

、

Two

和

three

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

这是我的建议

我不知道从哪里开始，也不知道如何开始

我在谷歌上搜索，得到的结果是使用

ul

而不是从javascript数组创建一个下拉列表

任何帮助都将非常有助于我克服这一困难

被困了两天，我还是不知道怎么做

提前谢谢。

var数据={
一：['4'，'5'，'6']，
二：['7'，'8'，'9']，
三：['10'、'11'、'12']
}
$（'.dropdown'）.change（函数（）{
$（'.dropdown2'）.remove（）；
var newSel=$（this）.after（“”）；
var option=$（'.dropdown'）.find（“：selected”）.text（）；
data[option.toLowerCase（）].forEach（函数（opt）{$（'.dropdown2'）.append（''+opt+''））}）；
})

相当直接。删除所有创建的旧下拉列表，获取选项值，并添加新选项。这有点冗长，但它很有效。

var数据={
一：['4'，'5'，'6']，
二：['7'，'8'，'9']，
三：['10'、'11'、'12']
}
$（'.dropdown'）.change（函数（）{
$（'.dropdown2'）.remove（）；
var newSel=$（this）.after（“”）；
var option=$（'.dropdown'）.find（“：selected”）.text（）；
data[option.toLowerCase（）].forEach（函数（opt）{$（'.dropdown2'）.append（''+opt+''））}）；
})

---

相当直接。删除所有创建的旧下拉列表，获取选项值，并添加新选项。这有点冗长，但它是有效的。

这是可以改进的，但这应该为您指明正确的方向。这是我的建议

一个
两个
三
$（文档）.ready（函数（）{
var下拉列表2={
1:[“四”、“五”、“六”]，
2:['七'，'八'，'九']，
3:['10'、'11'、'12']
}
$（'.dropdown'）。在（'change'，function（）上{
$（'.dropdown2'）.html(
''+dropdown2[$（this.val（）].join（''）+''
);
});
});

这是可以改进的，但这将为您指明正确的方向。这是我的建议

一个
两个
三
$（文档）.ready（函数（）{
var下拉列表2={
1:[“四”、“五”、“六”]，
2:['七'，'八'，'九']，
3:['10'、'11'、'12']
}
$（'.dropdown'）。在（'change'，function（）上{
$（'.dropdown2'）.html(
''+dropdown2[$（this.val（）].join（''）+''
);
});
});

检查此项 jQuery

$（文档）.ready（函数（）{
var下拉列表1={
1:[“四”、“五”、“六”]，
2:['七'，'八'，'九']，
3:['10'、'11'、'12']
}
$（'.dropdown1'）.html(
“”+下拉列表1[1]。连接（“”）+”
);
$（'.dropdown'）。在（'change'，function（）上{
$（'.dropdown1'）.html(
''+dropdown1[$（this.val（）].join（''）+''
);
});
});

HTML

一个
两个
三

检查此项 jQuery

$（文档）.ready（函数（）{
var下拉列表1={
1:[“四”、“五”、“六”]，
2:['七'，'八'，'九']，
3:['10'、'11'、'12']
}
$（'.dropdown1'）.html(
“”+下拉列表1[1]。连接（“”）+”
);
$（'.dropdown'）。在（'change'，function（）上{
$（'.dropdown1'）.html(
''+dropdown1[$（this.val（）].join（''）+''
);
});
});

HTML

一个
两个
三

这是可以改进的，但这将为您指明正确的方向@Crayon-非常感谢。这帮了我的忙。请将其作为答案发布。这可能会有所改进，但这将为您指明正确的方向@Crayon-非常感谢。这帮了我的忙。我想在数组中添加一个值相同的value属性。我该怎么做？已尝试通过像这样添加值属性来浓缩

数据[$（this）.val（）].join（）

。但是我得到的结果是

value='4,5,6'

。帮帮我，我想在数组中添加一个值相同的值属性。我该怎么做？已尝试通过像这样添加值属性来浓缩

数据[$（this）.val（）].join（）

。但是我得到的结果是

value='4,5,6'

。帮助我。

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

<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>

$(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>'
        );
    });
});

<select class="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="dropdown1">