如何根据JavaScript中下拉列表中的选择更改值？_Javascript_Html_If Statement_Html Select

如何根据JavaScript中下拉列表中的选择更改值？

javascript html if-statement

如何根据JavaScript中下拉列表中的选择更改值？,javascript,html,if-statement,html-select,Javascript,Html,If Statement,Html Select,在我的下拉列表中，我有选项1（A）和选项2（B）。如果我从下拉列表中选择一个，我想看到一个名字，Janifer。如果我选择B，我想看到另一个名字，大卫 var mylist = document.getElementById("mylist"); if (mylist.value == "1") { document.getElementById('myalllist').getElementsByTagName('option')[1].selected = 'selected';

在我的下拉列表中，我有选项1（A）和选项2（B）。如果我从下拉列表中选择一个，我想看到一个名字，Janifer。如果我选择B，我想看到另一个名字，大卫

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:


挑选
1.
2.
xxxxxxxx
YYYYYY

我也无法让它使用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>


window.onload=函数（）{
var foo=document.getElementById（“mylist”）；
foo.onchange=function（）{
如果（foo.options.selectedIndex！=0）{
document.getElementById（“myalllist”）.options.selectedIndex=foo.options.selectedIndex-1；
}
}
}
挑选
1.
2.
xxxxxxxx
YYYYYY

试试这个-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>


挑选
1.
2.
3.
4.
0
1.
2.
3.
4.
函数变更列表（）
{
var selectedOption=document.getElementById（“list1”）.options.selectedIndex；
document.getElementById（“list2”）.options.selectedIndex=selectedOption；
var selectedOption2=document.getElementById（“list2”）.options.selectedIndex；
console.log（选择选项2）
}

将所有其他选项的“selected”属性设置为空字符串，然后执行

selected=“selected”

行。如果我在列表1中选择value=0时只想看到列表2中的value=0…n那么我不必使用选项[0]。selectedIndex已经这样做了-我只是没有在选择选项文本中列出“0”，但该值为0。请注意，我已经修改了上面的代码并将其添加到中。我还添加了一个console.log机制来演示list1的每次更改中列出的值。当您将其更改为列表1中的选项2时，列表2将更改为显示选项2，并且console.log将显示选项2。等等如果在列表1中将其更改为“0”，则在列表2中会显示“0”，在控制台中会显示“0”。尝试在控制台打开的情况下更改list1，您将看到list2的更改值

<!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>