JQuery绑定select标签的onchange事件
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页⾯其它元素的值)
<script src="jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#mySelect').change(function(){
alert($(this).children('option:selected').val());
var p1=$(this).children('option:selected').val();//这就是selected的值
var p2=$('#param2').val();//获取本页⾯其他标签的值
window.location.href="xx.php?param1="+p1+"¶m2="+p2+"";//页⾯跳转并传参
})
})
</script>
<select id="mySelect">
<option value="1">one</option>
<option value="2" selected="selected">two</option>
<option value="3">three</option>
</select>
<input type="text" value="ooo" name="param2" id="param2"/>
<select class="selector"></select>
1、设置value为pxx的项选中
$(".selector").val("pxx");
2、设置text为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);
这⾥有⼀个中括号的⽤法,中括号⾥的等号的前⾯是属性名称,不⽤加引号。很多时候,中括号的运⽤可以使得逻辑变得很简单。
3、获取当前选中项的value
$(".selector").val();
4、获取当前选中项的text
$(".selector").find("option:selected").text();
这⾥⽤到了冒号,掌握它的⽤法并举⼀反三也会让代码变得简洁。
很多时候⽤到select的级联,即第⼆个select的值随着第⼀个select选中的值变化。这在jquery中是⾮常简单的。
$(".selector1").change(function(){
jquery的attr属性// 先清空第⼆个
$(".selector2").empty();
// 实际的应⽤中,这⾥的option⼀般都是⽤循环⽣成多个了 var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论