如何基于JavaScript下拉列表中的选择更改值?

问题描述 投票:0回答:2

在我的下拉列表中,我有选择1(A)和选择2(B)。如果我从下拉列表中选择A,我想看到一个名字,Janifer。如果选择B,我想看到另一个名字David。

var mylist = document.getElementById("mylist");

if (mylist.value == "1") {
    document.getElementById('myalllist').getElementsByTagName('option')[1].selected = 'selected';
}
if (mylist.value == "2") {
    document.getElementById('myalllist').getElementsByTagName('option')[2].selected = 'selected';
}

HTML:

<select id="mylist" onchange="fndropoption()">
    <option>Select</option>
    <option>1</option>
    <option>2</option>
</select>

<select id="myalllist" onchange="fndropoption()">
    <option value="1">xxxxxxxx</option>
    <option value="2">yyyyyyyy</option>
</select>
javascript html if-statement html-select
2个回答
0
投票

我也无法使其与onChange属性一起使用。这有效:

<!DOCTYPE html>
<html>


<head>
<script type="text/javascript">
window.onload = function() {
    var foo=document.getElementById("mylist"); 
    foo.onchange=function() {
        if(foo.options.selectedIndex != 0) {
            document.getElementById("myalllist").options.selectedIndex = foo.options.selectedIndex-1;
        }
    }

}

</script>
</head>
<body>
<select id="mylist">
 <option value="0" selected="selected">Select</option>
 <option value="1">1</option>
 <option value="2">2</option>
</select>       

<select id="myalllist" onChange="">
 <option value="1">xxxxxxxx</option> 
 <option value="2">yyyyyyyy</option>
</select>
</body>
</html>

0
投票

试试这个-onchange应该在第一个下拉列表上-触发第二个列表的更改。似乎可以工作,例如:在第一个列表中选择3将导致在第二个列表中选择3。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="list1" onChange="changeList()">
 <option value="0" selected="selected">Select</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
</select>       

<select id="list2" >
<option value="0">0</option>
 <option value="1">1</option> 
 <option value="2">2</option> 
 <option value="3">3</option> 
 <option value="4">4</option>
</select>

<script>
function changeList() 
    {
        var selectedOption=document.getElementById("list1").options.selectedIndex; 
        document.getElementById("list2").options.selectedIndex = selectedOption;

        var selectedOption2=document.getElementById("list2").options.selectedIndex; 
        console.log(selectedOption2) 
    }
</script>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.