Question

如何将以下两个功能合并为仅使用一个类？我将如何使用它们，将非常方便。我想结合每个下拉列表允许3个选项的功能，但将.multiselect1和.multiselect2合并为.multiselect

以下是我正在使用的这些下拉小部件的小提琴：http://jsfiddle.net/3u7Xj/124/

 $(document).ready(function () {
            $(".multiselect1").multiselect({
                header: "Choose up to 5 areas total",
                click: function (event, ui) {   
                    var number1 = $("#MDCselect").children(":checked").length;
                    if (ui.checked && (number1 >= 3)) {
                        return false;
                    }
                },
                selectedList: 5
            });
        });
        $(document).ready(function () {
            $(".multiselect2").multiselect({
                header: "Choose up to 5 areas total",
                click: function (event, ui) {
                  var number2 = $("#Clinicalselect").children(":checked").length;
                    if (ui.checked && (number2 >= 3)) {
                        return false;
                    }
                },
                selectedList: 5
            });
        });

Answer 1

您可以按照以下方式进行更改（jsFiddle）：

   $(document).ready(function () {
        $(".multiselect").multiselect({
            header: "Choose up to 5 areas total",
            click: function (event, ui) {   
                var number = $(this).children(":checked").length;
                if (ui.checked && (number >= 3)) {
                    return false;
                }
            },
            selectedList: 5
        });
    });

需要对html稍作修改：将多选类设置为multiselect。

然而，有一个问题。它表示您最多可以选择5个区域，但限制设置为3.这仅仅是一个简洁示例的症状吗？

Answer 2

您可以编写此代码：

<select multiple="multiple" class="mp">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

<select multiple="multiple" class="mp">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

和javascript

$(document).ready(function () {
            $(".mp").multiselect({
                header: "Choose up to 5 areas total",
                click: function (event, ui) {   
                    var number1 = $(this).children(":checked").length;
                    if (ui.checked && (number1 >= 3)) {
                        return false;
                    }
                },
                selectedList: 5
            });
        });

结帐demo

Answer 3

查看更新的小提琴。你可以使用$（this）

http://jsfiddle.net/3u7Xj/125/

   $(document).ready(function () {
        $(".multiselect").multiselect({
            header: "Choose up to 5 areas total",
            click: function (event, ui) {

                var number1 = $(this).children(":checked").length;
                if (ui.checked && (number1 >= 3)) {
                    return false;
                }
            },
            selectedList: 5
        });
    });

结合/“美化”这两个功能使用1类

3 个答案: