Populating dropdown list with javascript
Question
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' ] .
The values in second dropdown are [ 'ten', 'nine', 'eight', 'seven' ] .
If I select two in the first dropdown then second dropdown should be auto-populated with 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 answers
solution1
1 2014-04-21 09:03:39
Try this
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)
});
});
solution2
0 2014-04-21 09:08:21
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');
}
});
});
solution3
0 2014-04-21 09:09:54
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;
}
SEE fiddle Demo
solution4
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.