下拉列表多选(js,JQuery,ajax)

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />


<link rel="stylesheet" type="text/css" href="../jquery-ui.css" />



<script type="text/javascript" src="../src/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>

<script type="text/javascript">
$(function(){

    $("#abc").multiselect({
        selectedList: 4
    });
    
});
</script>

</head>
<body>


<form>
    <p>
        <select id="abc" name="example-list"  style="400px">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
        <option value="option7">Option 7</option>
        </select>
    </p>
    
            <select name="example-list1"  >
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
        <option value="option7">Option 7</option>
        </select>
</form>


</body>
</html>

 

//下拉列表元素
 <td class="leftTd">所属行业:</td>
            <td class="rightTd">
                @Html.MultiselectDropDownListFromDict("SdaptIndustry", new { @class = "inputClass", @multiple = "multiple" }, "SdaptIndustry")
            </td>

//初始化下拉列表信息
$(function () {
    $("#SdaptIndustry").multiselect({
                noneSelectedText: "请选择",
                checkAllText: "全选",
                uncheckAllText: '全不选',
                selectedText: '已选择#项',
                selectedList: 6
            });
 });
//Ajax 实现信息添加
   var profile = UE.getEditor('CommProfile').getContent();
            $.ajax({
                url: "/Commodity/Add",
                type: 'POST',
                data: {
                 
                    SdaptIndustry: "" + $('#SdaptIndustry').val(),
                    SdaptIndustryName: "" + $("#SdaptIndustry").multiselect("getSelectedText"),
                    SdaptBusDomain: "" + $('#SdaptBusDomain').val(),
                    SdaptBusDomainName: "" + $('#SdaptBusDomain').multiselect("getSelectedText"),
                  
                },
                success: function (data) {
                    if (data.success) {
                        alert("添加成功!");
                        //$("#rightDiv").load("/Commodity/ManageIndex", "", function () { });
                        window.location.href = "ManageIndex";
                    }
                    else alert(data.message);
                },
                dataType: "json",
            });
        }

修改信息:

        //数据库信息,显示到下拉列表选中

var ids = '@Model.SdaptIndustry'.split(","); $('#SdaptIndustry option').each(function (i, content) { //alert(i+"***"+content.value); if ($.inArray($.trim(content.value), ids) >= 0) { this.selected = true; } }); $("#SdaptIndustry").multiselect({ noneSelectedText: "请选择", checkAllText: "全选", uncheckAllText: '全不选', selectedText: '已选择#项', selectedList: 6 });
原文地址:https://www.cnblogs.com/HKKILL/p/5607063.html