87,991
社区成员
发帖
与我相关
我的任务
分享有个题目，jquery实现。
原html
有个题目， 通过点击按钮实现
要实现的效果如下即只保留有option的 relid=1的select元素，其他都移除掉。。
Button1的value值可以随便改，，如果改成2就是保留option relid=2的select元素。其他删除。
<input id="Button1" type="button" value="button" value="1" />
<div id="selectPanel" style="height: 228px; line-height: 228px; border: 1px solid red">
<select>
<option relid="1">test</option>
<option relid="1">test</option>
<option relid="1">test</option>
<option relid="1">test</option>
</select>
<select>
<option relid="2">test</option>
<option relid="2">test</option>
<option relid="2">test</option>
<option relid="2">test</option>
</select>
<select>
<option relid="3">test</option>
<option relid="3">test</option>
</select>
</div>有个题目， 通过点击按钮实现
要实现的效果如下即只保留有option的 relid=1的select元素，其他都移除掉。。
Button1的value值可以随便改，，如果改成2就是保留option relid=2的select元素。其他删除。
<input id="Button1" type="button" value="button" value="1" />
<div id="selectPanel" style="height: 228px; line-height: 228px; border: 1px solid red">
<select>
<option relid="1">test</option>
<option relid="1">test</option>
<option relid="1">test</option>
<option relid="1">test</option>
</select>
</div>
...全文
请发表友善的回复…
发表回复
函麻 2013-01-07
- 打赏
- 举报
Button已经存在value,可以把值赋个属性：
<input id="Button1" type="button" value="button" val="1" />
$("#Button1").bind("click", function () {
var value = $(this).attr("val");
$("#selectPanel option[relid='" + value + "']").remove();
});
weitao1234 2013-01-07
- 打赏
- 举报
$(document).ready(function(){
$("#Button1").click(function(){
var value = $("#Button1").val();
$(select option relid=value).remove();
});
})
nitaiyoucala 2013-01-07
- 打赏
- 举报
还加个条件可以不，，如果是selectPanel下的第一个select也不移除。。
nitaiyoucala 2013-01-07
- 打赏
- 举报
还加个条件可以不，，如果是selectPanel下的第一个select也不移除。。
似梦飞花 2013-01-07
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Picture List</title>
<script type="text/javascript">
function getSe(num){
var ops=document.getElementsByTagName("option");
for(var i=0;i<ops.length;i++){
var v=ops[i].getAttribute("relid");
if(v==num){
return ops[i].parentNode;
}
}
}
function hide(){
var num=document.getElementById("test").value;
var p=getSe(num);
var ses=document.getElementsByTagName("select");
for(var i=0;i<ses.length;i++){
ses[i].style.display="none";
}
p.style.display="block";
}
</script>
</head>
<body>
<input type="text" id="test">
<input id="Button1" type="button" value="button" onclick="hide()"/>
<div id="selectPanel" style="height: 228px; line-height: 228px; border: 1px solid red">
<select>
<option relid="1">test1</option>
<option relid="1">test1</option>
<option relid="1">test1</option>
<option relid="1">test1</option>
</select>
<select>
<option relid="2">test2</option>
<option relid="2">test2</option>
<option relid="2">test2</option>
<option relid="2">test2</option>
</select>
<select>
<option relid="3">test3</option>
<option relid="3">test3</option>
</select>
</div>
</body>
</html>
大体这样试试
你的button的值可变不知是什么意思
roffer 2013-01-07
- 打赏
- 举报
<input id="Button1" type="button" value="button" value="1" />
//你上边这段代码有2个value值？我这里以第二个value为参考
$('#Button1').click(function(){
$('#selectPanel select option[relid!='+$(this).val()+']').parent().remove();
})
