用JS做一个小demo时卡住了，求大神们帮忙

我想实现的效果是左边选中了一个选项，右边那个选项相同的就会变蓝，右边选中也是这样。要JS做，不用JQuery，我做到这里就做不下去了，求大神帮我看看，指导我一下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
select {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: #ccc 1px solid;
    border-radius: 3px;
}
input[type="button"] {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 3px;
}
input.active {
    background: #09F;
}
</style>
<script type="text/javascript">
function each(){
    var Menu = document.getElementById("menu");
    var listNum=Menu.children.length||Menu.childNodes.length;
    for(var i=0;i<listNum;i++){
        var btnI=document.getElementById("btn"+(i+1));
        (function(i){
            btnI.onclick = function(){
                var btnI=document.getElementById("btn"+(i+1));
                var cityName=btnI.value;    
                var active = document.querySelector("#form1>input.active");
                if(active!=null){
                    active.className="";
                } 
                btnI.className="active";
                alert(aaa)
            }
        })(i);       
    }
}
function selectInput(selecte){    
        var Menu = document.getElementById("menu");  
        var Option=Menu.options[Menu.selectedIndex].text;  
        console.log(Option);
} 
var aaa=selectInput();
window.onload = function(){
        each();
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label for="menu"></label>
  <select name="menu" id="menu" onChange="selectInput(this)">
    <option>温江区</option>
    <option>双流区</option>
    <option>龙泉驿区</option>
    <option>新都区</option>
    <option>郫县</option>
    <option>表白江区</option>
  </select>
  <input type="button" id="btn1" value="温江区" />
  <input type="button" id="btn2" value="双流区" />
  <input type="button" id="btn3" value="龙泉驿区" />
  <input type="button" id="btn4" value="新都区" />
  <input type="button" id="btn5" value="郫县" />
  <input type="button" id="btn6" value="表白江区" />
</form>
</body>
<script type="text/javascript">

</script>
</html>

我得到了昨天选项里的内容，但是不知道怎么和右边的cityname进行相等的判断。

一杯2块的奶茶

浏览 2312回答 4

4回答

Alive灬

试试，看着你的改了下，但可优化的地方还挺多的。 <script type="text/javascript"> var input = document.getElementsByTagName('input'); function each(){ var Menu = document.getElementById("menu"); var listNum=Menu.children.length||Menu.childNodes.length; for(var i=0;i<listNum;i++){ var btnI=document.getElementById("btn"+(i+1)); (function(i){ btnI.onclick = function(){ var btnI=document.getElementById("btn"+(i+1)); for(var j = 0;j<input.length;j++){ input[j].className = ''; } btnI.className="active"; Menu.options[i].selected=true } })(i); } } function selectInput(){ var selectValue = document.getElementById('menu').value; for(var i = 0;i<input.length;i++){ input[i].className = ''; if(selectValue===input[i].value){ input[i].className = 'active'; } } } selectInput(); window.onload = function(){ each(); } </script>

Salettre

随时随地看视频慕课网APP