zoukankan      html  css  js  c++  java
  • 下拉列表多选(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 });
  • 相关阅读:
    自动化生成测试报告
    测试用例设计的常见几种方法
    python的七种数据类型
    python读写文件的几种方法
    测试工具之fiddler
    自动化前置用例和后置用例
    python的几种数据类型以及举例
    Selenium请求库
    第一篇帖子,上火了
    汉诺塔算法
  • 原文地址:https://www.cnblogs.com/HKKILL/p/5607063.html
Copyright © 2011-2022 走看看