jquery multiselect下拉列表复选框动态怎么动态添加option并赋值

Posted 2023-05-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery multiselect下拉列表复选框动态怎么动态添加option并赋值相关的知识，希望对你有一定的参考价值。

求大神,在线等。
$("#select").append( "<option value=" + fkind.clannel1 + ">" + fkind.clannel1 +"</option>");
这种方法只能添加下拉框，不知道怎么处理下拉复选框

虽然不太明白为什么refresh方法不起作用，不过还有另外一个方法：

// data 是ajax返回的json数据
$.get("xxx.html?a=" + a, function (data)
var site = new Array();
$.each(data, function(index, values)
//循环将data数据的结构重新调整为下面这样的：[label:xxx,value:id]
// laebl相当于option的文字，value则是option的value，结构不能错
site.push(
label : values.site_name,
value : values.id
);
);
//重点是这里，不用refresh方法，用下面这个。
$("#site_id").multiselect('dataprovider',site);
);

如果你在查询数据库的时候直接就这样：

select id as value, city_name as label from 表名

那么返回值在js那里就不需要循环改变结构了，直接可以用：

$("#site_id").multiselect('dataprovider',data);

参考技术A

你可以在select控件的子节点上面绑定一个click的事件，

var optStr =“”;
//比如子节点是一个div
$("#select").find("div").click(function()
        //每次单击都获取选定值的数组并拼接成逗号分割的字符串
        // 这样就不用每次都判断选中或者取消的值是否在原字符串当中
        optStr = $.map($("#select").find("checkbox:checked").val(), function)              return $(this).val();         ).get().join(",");
);
只是对你提的问题给一个大概的思路，希望对你有帮助，不懂的地方可以追问。望采纳...

本回答被提问者采纳参考技术B 用jquery将对方取到，然后用add方法，将所添加的元素和值，添加到复选框里
$("select option").add("<option value ="volvo">Volvo</option>"); 参考技术C 看源码，有个refresh方法，每次动态将select里的option跟换，然后调用refresh就ok

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

以上是关于jquery multiselect下拉列表复选框动态怎么动态添加option并赋值的主要内容，如果未能解决你的问题，请参考以下文章

怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度

从代码隐藏设置 Jquery Multiselect 插件属性

jquery multiSelect 怎么清空选择

如何在选定控件上使用 Jquery Multiselect 插件

将多选列表变成一个漂亮且易于使用的带有复选框的列表。

显示多选 jquery 的所有选项