我想实现的效果是左边选中了一个选项，右边那个选项相同的就会变蓝，右边选中也是这样。要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进行相等的判断。
4 回答
Alive灬
TA贡献2条经验 获得超0个赞
试试，看着你的改了下，但可优化的地方还挺多的。
<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
TA贡献2条经验 获得超0个赞
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);
}
}
}
添加回答
举报
0/150
提交
取消