用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块的奶茶浏览 2221回答 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
function selectInput(){ var selectValue = document.getElementById('menu').value;//下拉框 var inputValue =[]; var input = document.getElementsByTagName('input'); for(var i = 0;i<input.length;i++){ inputValue.push(input[i].value); } for(var i = 0;i<inputValue.length;i++){ if(selectValue===inputValue[i]){ alert(i); } }}
随时随地看视频慕课网APP
相关分类
JavaScript