<!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="width: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
});
时间： 2024-08-02 10:44:19