使用JavaScript填充下拉列表
[英]Populating dropdown list with javascript
问题描述
I have two dropdown list. 
我有两个下拉列表。 These two are not interdependent on each other. 两者并不相互依赖。
The values in the first dropdown list are [ 'one', 'two', 'three', 'four' ] . 第一个下拉列表中的值为[ 'one', 'two', 'three', 'four' ] 。
The values in second dropdown are [ 'ten', 'nine', 'eight', 'seven' ] . 第二个下拉列表中的值为[ 'ten', 'nine', 'eight', 'seven' ] 。
If I select two in the first dropdown then second dropdown should be auto-populated with nine . 如果我在第一个下拉菜单中选择了two ，则第二个下拉菜单应自动填充为nine 。
I have tried this. 我已经试过了。
var value1=document.getElementById('ddlone').value;
if(vaue1=='two'){
document.getElementById('ddlone').selectedValue='nine';
} else {
document.getElementById('ddlone').selectedValue='';
}
But I didn't get the expected result. 但是我没有得到预期的结果。 Please help me in this regard. 请在这方面帮助我。
4 个解决方案
解决方案1
1 2014-04-21 09:03:39
Try this 尝试这个
HTML 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>
Script 脚本
$(document).ready(function () {
$('#first').on('change', function () {
var vall = $(this).find('option:selected').index()
$('#second').find('option').eq(vall).prop('selected', true)
});
});
解决方案2
0 2014-04-21 09:08:21
HTML: 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: 使用Javascript：
$(function(){
$("#sel1").on('change', function(){
var value = $(this).val();
if( value == '2' ){
$("#sel2").val('7');
}
});
});
解决方案3
0 2014-04-21 09:09:54
HTML : 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 : 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;
}
SEE fiddle Demo 查看小提琴演示
解决方案4
0 2014-04-21 09:16:47
You have to add an onchange event to the first drop down and call one function and have to change the value of second drop down. 您必须在第一个下拉列表中添加onchange事件并调用一个函数，并且必须更改第二个下拉列表的值。
Here the code 这里的代码
<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>
Best of Luck 祝你好运
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.