关于js的下拉菜单select

JavaScript027

关于js的下拉菜单select,第1张

你是要这样的效果吗？ 用回车添加

<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后加一个数字