<html>
<head>
<style>
.cls1 { position:absoluteleft:250pxtop:89pxwidth:216pxheight:72pxz-index:1}
.cls2 { position:absoluteleft:250pxtop:89pxwidth:95pxheight:18pxz-index:2 }
input { font-size: 12pxpadding-top: 2pxpadding-left: 2pxwidth:127}
</style>
</head>
<script>
function addOption(pos){
if(event.keyCode==13) //使用回车添加
{
var select_obj = document.getElementById("myselect")
var text_value = document.getElementById("test").value
if (select_obj.length)
{
for (var i=0i<select_obj.lengthi++)
{
// 如果已经存在，不添加，直接退出
if (select_obj.options[i].text==text_value)
alert("选项已存在，请重新输入")
}
}
var the_option= new Option(text_value,text_value)
select_obj.add(the_option)
select_obj.selectedIndex = select_obj.options.length-1
}
}
</script>
<div class="cls1" style="clip: rect(3 280 21 110)">
<select name="myselect" style="width:127" onchange="document.getElementById('test').value=this.value">
</select>
</div>
<div class="cls2">
<input type="text" name="test" onkeydown="addOption()" size="20" style="width: 127height: 23">
</div>
</body>
</html>
1.可以动态添加多个下拉框,可减少下拉框2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。
ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。
第一个下拉选项显示
选择下拉项，同时加载数据到第三个下拉框
注：在这里直接去掉了第二行的标签
为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字
