JS select 相同ID显示相同内容
第一个<selectname="tid"id="tid"><optionid="1"value=''AA">选择所属栏目1</option><optionid="2"va...
第一个
<select name="tid" id="tid" >
<option id="1" value=''AA">选择所属栏目1</option>
<option id="2" value=''AA">选择所属栏目2</option>
<option id="3" value=''AA">选择所属栏目3</option>
</select>
第二个
<select name="pname" >
<option id="1" value=''AA">选择所属栏目1</option>
<option id="2" value=''AA">选择所属栏目2</option>
<option id="3" value=''AA">选择所属栏目3</option>
</select>
有2个select我想实现用JS选择第一个select option后第二个 select 则显示相同内容刷新页面显示一样内容！也就是用JS调用ID的方法实现2个select同步！ 展开
<select name="tid" id="tid" >
<option id="1" value=''AA">选择所属栏目1</option>
<option id="2" value=''AA">选择所属栏目2</option>
<option id="3" value=''AA">选择所属栏目3</option>
</select>
第二个
<select name="pname" >
<option id="1" value=''AA">选择所属栏目1</option>
<option id="2" value=''AA">选择所属栏目2</option>
<option id="3" value=''AA">选择所属栏目3</option>
</select>
有2个select我想实现用JS选择第一个select option后第二个 select 则显示相同内容刷新页面显示一样内容！也就是用JS调用ID的方法实现2个select同步！ 展开
3个回答
展开全部
用JQuery比较简单一点儿，下面是我用JQuery做出来的效果（对你的第二个select控件加了一个id属性）
//引入jQuery文件
<script src="jquery-1.8.3.js"></script>
//这里是jQuery代码
<script type="text/javascript">
$(function () {
$("#tid").change(function () {
//获取select1 的选中项的索引
var index =$("#tid").prop("selectedIndex")
//设置selecte3 的选中项索引
$("#tid2 option")[index].selected = true;
})
})
</script>
</head>
<body>
<select name="tid" id="tid">
<option id="1" value="AA">选择所属栏目1</option>
<option id="2" value="AA">选择所属栏目2</option>
<option id="3" value="AA">选择所属栏目3</option>
</select>
第二个
<select name="pname" id="tid2">
<option id="Option1" value="AA">选择所属栏目1</option>
<option id="Option2" value="AA">选择所属栏目2</option>
<option id="Option3" value="AA">选择所属栏目3</option>
</select>
</body>
//----------------------------------------------------
我也帮你找到了一个js实现的例子，我没有测试过，只是看了看代码，你自己看着试试吧
<dooctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'>
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="move('select1','select2',false);" value="-->"/><br/>
<input type="button" onclick="move('select1','select2',true)" value="==>"/><br/>
<input type="button" onclick="move('select2','select1',false)" value="<--"/><br/>
<input type="button" onclick="move('select2','select1',true)" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
//JS实现代码
<script type='text/javascript'>
function move(src,dest,moveAll) {
src = document.getElementById(src);
dest = document.getElementById(dest);
for(var len=src.options.length-1;len>=0;len--) {
if(moveAll) {
dest.appendChild(src.options[len]);
}
else if(src.options[len].selected){
src.options[len].selected=false;
dest.appendChild(src.options[len]);
}
}
}
</script>
</body>
</html>
希望对你有帮助，谢谢
//引入jQuery文件
<script src="jquery-1.8.3.js"></script>
//这里是jQuery代码
<script type="text/javascript">
$(function () {
$("#tid").change(function () {
//获取select1 的选中项的索引
var index =$("#tid").prop("selectedIndex")
//设置selecte3 的选中项索引
$("#tid2 option")[index].selected = true;
})
})
</script>
</head>
<body>
<select name="tid" id="tid">
<option id="1" value="AA">选择所属栏目1</option>
<option id="2" value="AA">选择所属栏目2</option>
<option id="3" value="AA">选择所属栏目3</option>
</select>
第二个
<select name="pname" id="tid2">
<option id="Option1" value="AA">选择所属栏目1</option>
<option id="Option2" value="AA">选择所属栏目2</option>
<option id="Option3" value="AA">选择所属栏目3</option>
</select>
</body>
//----------------------------------------------------
我也帮你找到了一个js实现的例子，我没有测试过，只是看了看代码，你自己看着试试吧
<dooctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'>
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="move('select1','select2',false);" value="-->"/><br/>
<input type="button" onclick="move('select1','select2',true)" value="==>"/><br/>
<input type="button" onclick="move('select2','select1',false)" value="<--"/><br/>
<input type="button" onclick="move('select2','select1',true)" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
//JS实现代码
<script type='text/javascript'>
function move(src,dest,moveAll) {
src = document.getElementById(src);
dest = document.getElementById(dest);
for(var len=src.options.length-1;len>=0;len--) {
if(moveAll) {
dest.appendChild(src.options[len]);
}
else if(src.options[len].selected){
src.options[len].selected=false;
dest.appendChild(src.options[len]);
}
}
}
</script>
</body>
</html>
希望对你有帮助，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
指正一下错误的地方
一个页面中，ID只能是唯一，如果存在多个ID，查找元素的时候，只会查找到第一个元素。
/*javascript版 方法一*/
//获得第一个select选中项的index
var oSelect=document.getElementById("tid");
var index=oSelect.selectedIndex ;
//第二个select,用name获取。因为没有id
var oSelectTwo=document.getElementsByName("pname")[0];
//设置第二个下拉框和第一个下拉框选中项的下标相同
oSelectTwo.selectedIndex = index;
/*javascript版 方法二*/
var oSelect=document.getElementById("tid");
var oSelectTwo=document.getElementsByName("pname")[0];
oSelectTwo.value = oSelect.value;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你个例子
<html>
<body>
第一个
<script>
function $(obj){return document.getElementById(obj);}
</script>
<select name="tid" id="tid" onchange="$('pname').value=this.value;" >
<option id="1" value="AA">选择所属栏目1</option>
<option id="2" value="bb">选择所属栏目2</option>
<option id="3" value="cc">选择所属栏目3</option>
</select>
第二个
<select name="pname" id="pname" onchange="$('tid').value=this.value;">
<option id="1" value="AA">选择所属栏目1</option>
<option id="2" value="bb">选择所属栏目2</option>
<option id="3" value="cc">选择所属栏目3</option>
</select>
</body>
</html>
追问
这个貌似可以忽略ID吗
追答
value值相同就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
