[英]Populating dropdown list with javascript
我有两个下拉列表。 两者并不相互依赖。
第一个下拉列表中的值为[ 'one', 'two', 'three', 'four' ]
。
第二个下拉列表中的值为[ 'ten', 'nine', 'eight', 'seven' ]
。
如果我在第一个下拉菜单中选择了two
,则第二个下拉菜单应自动填充为nine
。
我已经试过了。
var value1=document.getElementById('ddlone').value;
if(vaue1=='two'){
document.getElementById('ddlone').selectedValue='nine';
} else {
document.getElementById('ddlone').selectedValue='';
}
但是我没有得到预期的结果。 请在这方面帮助我。
尝试这个
HTML
<select id="first">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="second">
<option>select</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
</select>
脚本
$(document).ready(function () {
$('#first').on('change', function () {
var vall = $(this).find('option:selected').index()
$('#second').find('option').eq(vall).prop('selected', true)
});
});
HTML:
<select id="sel1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<select id="sel2">
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
<option value="8">eight</option>
</select>
使用Javascript:
$(function(){
$("#sel1").on('change', function(){
var value = $(this).val();
if( value == '2' ){
$("#sel2").val('7');
}
});
});
HTML:
<select id="first" onchange="change_second(this.value);">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<select id="second">
<option value="ten">ten</option>
<option value="nine">nine</option>
<option value="eight">eight</option>
<option value="seven">seven</option>
</select>
JS:
function change_second(val)
{
var elmnt1 = document.getElementById('first');
var elmnt2 = document.getElementById('second');
var desired_index = 0;
for(var i=0; i < elmnt1.options.length; i++)
{
if(elmnt1.options[i].value === val) {
desired_index = i;
break;
}
}
elmnt2.selectedIndex = desired_index;
}
查看小提琴演示
您必须在第一个下拉列表中添加onchange事件并调用一个函数,并且必须更改第二个下拉列表的值。
这里的代码
<html>
<script>
function populatedrop2(){
var value= document.getElementById("drop1").value;
if(value == "two"){
document.getElementById("drop2").value = "nine";
}
}
</script>
<body>
<select id="drop1" onchange=populatedrop2();>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<select id="drop2">
<option value="seven">seven</option>
<option value="eight">eight</option>
<option value="nine">nine</option>
<option value="ten">ten</option>
</select>
</body>
</html>
祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.