jQuery操作下拉列表以及单选多选框 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <center>
            <!--文本框-->
            用户名:<input type="text" name="username" id="username" value="初始值" />
            <br />
            <br />

            <!--下拉列表-->
            部门:
            <select name="unit" id="unit" style="width: 200px;">
                <option value="0" selected>--请选择--</option>
                <option value="1">部门1</option>
                <option value="2">部门2</option>
            </select><br />

            <!--多选框-->
            爱好:
            <input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球
            <input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球
            <input type="checkbox" name="aihao" id="" value="2" />羽毛球
            <input type="checkbox" name="aihao" id="" value="3" />乒乓球
            <br />

            <!--单选框-->
            性别:
            <input type="radio" name="gender" id="" value="0" checked="checked" />男
            <input type="radio" name="gender" id="" value="1" />女
            <br />
            <br />
            <input type="button" id="" value="改变文本值" onclick="initText()" />
            <input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" />
            <input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" />
            <input type="button" id="" value="改变单选框值" onclick="changeRadio()" />
            <input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" />
            <script type="text/javascript">
                /*读取与改变文本框值*/
                function initText() {
                    alert($("#username").val());
                    $("#username").val("这是改变后的值");
                }

                /*读取与改变下拉列表值*/
                function changeSelect() {
                    alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text());
                    $("#unit").val("2");
　　　　　　　　　　　　//或者
　　　　　　　　　　　　$("#level option[value='"+value+"']").attr("selected","true");
                }

                function changeCheckbox() {
                    /*获取多选框的值*/
                    //                    $aihaos是一个数组
                    var $aihaos = $("[name='aihao'][checked]");
                    alert("多选框选中个数:" + $aihaos.length);
                    for(var i = 0; i < $aihaos.length; i++) {
                        var value = $($aihaos[i]).val();
                        alert(value);
                    }
                    /*设置为不选中状态*/
                    $($aihaos).attr("checked", false);
                    //设置其中一个为选中状态
                    $("[name='aihao'] :eq(2)").attr("checked", 'checked');
                }

                function changeRadio() {
                    /*获取单选框的值*/
                    //                    $aihaos是一个数组
                    var $aihaos = $("[type='radio'][checked]");
                    alert("多选框选中个数:" + $aihaos.length);
                    for(var i = 0; i < $aihaos.length; i++) {
                        var value = $($aihaos[i]).val();
                        alert(value);
                    }
                    //设改变单选框的值
                    $("[type='radio'] :eq(1)").attr("checked", 'checked');
　　　　　　　　　　　　$(":radio[value='线下']").prop("checked", true);
                }

                //动态给下拉列表增加选项
                function addSelect() {
                    var $unit = $("[name='unit']");
                    alert("多选框选中个数:" + $unit.length);
                    $unit.append("<option value='3'>部门3</option>");
                    $("<option value='4'>部门4</option>").appendTo($unit);
                }
            </script>

        </center>
    </body>

</html>

 

附加总结:

设置多选框联动(点一个，其他跟着变)

//	多选框联动
	$("#empCheckAll").click(function(){
		$("input[name='checkBox']").prop("checked",$(this).prop("checked"));
	})

　　

 动态设置下拉列表的值:(有时候会不灵所以用下面这个)

$("[name='coursenature'] option[value='"+courseInfoBack.coursenature+"']").attr("selected","selected");

 

补充:建议还是用$("#selectId").val("222");的方式修改下拉列表的值。

例如:

<!DOCTYPE html>
<html>

    <body>
        <select id="test">
            <option value="111">111</option>
            <option value="222">222</option>
            <option value="333">333</option>
        </select></body>

</html>
<script>
$("#selectId").val("222");</script>

 

 

 

 

 

 

 

更多具体的可以参考:http://www.cnblogs.com/qlqwjy/p/7511814.html

 

posted @ 2017-09-12 21:19  QiaoZhi  阅读(1970)  评论(0)  编辑  收藏  举报