javascript - 在一个列表框中选择多个术语 asp c#

Question

我想从下拉列表中选择一个术语，然后从同一个术语中选择一个颜色或值。例如，我要选择“Account Executive”，然后选择“red”。那里已经有 jquery 库了吗？是否可以？它也可以是下拉菜单而不是颜色。

这就是我填充下拉 C# 的方式

  DataSet dsRoles = obj.ds("Role");
  ddlRole.DataSource = dsRoles ;
  ddlRole.DataTextField = "Term";
  ddlRole.DataValueField = "Term";
  ddlRole.DataBind();
  ddlRole.Items.Insert(0, new ListItem("== Select 1 Term ==", ""));

ASP

<asp:ListBox ID="ddlRole" AutoPostBack="false" runat="server" SelectionMode="Multiple"> 

Answer 1

不幸的是，我不知道有什么开箱即用的控件。 select2 是比较流行的多选 jquery 库之一。您可以覆盖 js 事件，使其按照您希望完成的方式运行。我不确定如果不进行一些重构，这会有多大的可扩展性，但这里有一个关于如何在单个选择上进行的演练。

select2 的 CDN 链接:https://select2.org/getting-started/installation

首先设置你的基本选择元素

<select id="tag" style="width: 50%" multiple="multiple"></select>

乐趣从js开始

我们需要跟踪我们选择的值

    var collectionArray = [];

接下来是输入我们的 select2 控件的初始数组而 id 是位置的唯一标识符，简单文本是您选择时要显示的值，文本是下拉列表中的 html 值

文本元素有一个颜色 block ，每个颜色 block 都有一个点击元素，用于将 id 和颜色的数字表示传递给 js 函数。这应该进一步展开，但为了演示保持简单

    var data = [
        { id: 0, simpleText:'Account Executive',  text: '<div style="display:block; min-height:30px; cursor:default;"><div style="float:left;">Account Executive</div><div style="float:right;"><table><tr><td class="tableSelect tableSelectRed" onclick="select2Override(0,0)"></td><td class="tableSelect tableSelectOrange" onclick="select2Override(0,1)"></td><td class="tableSelect tableSelectGreen"onclick="select2Override(0,2)"></td></tr></table></div></div>' },
        { id: 1,simpleText:'Account Management',  text: '<div style="display:block; min-height:30px; cursor:default;"><div style="float:left;">Account Management</div><div style="float:right;"><table><tr><td class="tableSelect tableSelectRed" onclick="select2Override(1,0)"></td><td class="tableSelect tableSelectOrange"onclick="select2Override(1,1)"></td><td class="tableSelect tableSelectGreen" onclick="select2Override(1,2)"></td></tr></table></div></div>' }];

接下来我们用我们的数据数组初始化我们的 select2 对象。我们需要覆盖选择和取消选择功能并自行处理这些

$("#tag").select2({
        data: data,
        //these options are telling it to use html from the text element. They are required or else it will just generate your html as text
        templateResult: function (d) { return $(d.text); },
        templateSelection: function (d) { return $(d.text); },
        tags: true

    }).on("select2:selecting", function (e) {
        // make sure we are on the list and not within input box
        //this is overriding the default selection event of select2, we will hadle that in our own onclick function based upon the color box they selected
        if (e.params.args.originalEvent.currentTarget.nodeName === 'LI') {
            e.preventDefault();
        }
    }
    ).on('select2:unselecting', function (e) {
        //we are injecting another method here when the object is unselected. We want to remove it from our master list to prevent duplicate inputs on our add function
        removeFromList(e.params.args.data.id);
    });

我们需要手动处理从我们的选择列表中删除并确保我们的主集合保持最新

    function removeFromList(id) {
        //actual remove from the selected list
        $('#tag option[value=' + id + ']').remove();
        //actual remove from the master collection to prevent dups
        collectionArray = collectionArray.filter(entry => entry.tagID != id)
    }

接下来是我们用于选择的主要插入者功能。我们首先需要检查该项目是否已经存在于我们的主要收藏中(我们不希望重复)。如果没有，那么我们需要给它一个唯一的 ID，以便以后在我们的主列表中引用。我们将从当前选择列表中找到最大值，以确保不会重复，然后将新值注入(inject)我们的选择列表，确保它被标记为已选择，并进入我们的主集合数组:

    function select2Override(id, color) {
        //our override function for when anyone selects one of the color boxes

        //first check if it is already in our master list, if so then dont add a dup, remove it!
        var doesExistsAlready = collectionArray.filter(entry => entry.type === id && entry.color === color);
        if (doesExistsAlready.length != 0) {
            for (var i = 0; i < doesExistsAlready.length; i++) {
                removeFromList(doesExistsAlready[i].tagID);
            }

        } else {
            //its not found in our master list 
            //we need to get a unique if to accompy this entry, fund the highest existing value in the current list and add 1
            var lastID = findMaxValue($('#tag')) + 1;

            //push it to our master list
            collectionArray.push({ "type": id, "color": color, "tagID": lastID });

            //get the selected value from our initial list so we can pull out the "simple text" to display
            var check = $.grep(data, function (obj) { return obj.id === id; })[0];

            //decorate our selection with a color depending on what they selected
            var colorDisplay;
            switch(color) {
              case 0:
                    colorDisplay = "red";
                break;
              case 1:
                colorDisplay =  "orange"
                break;
              case 2:
                    colorDisplay =  "green";
                break;
            }
            //prep our new select option with our new color, simple text and unique id and set to selected
            var newOption = new Option('<div style="color:' + colorDisplay + ';display:inline;">' + check.simpleText + '</div>', lastID, true, true);

            //append it to our list and call our change method so js reacts to the change
            $('#tag').append(newOption).trigger('change');
        }
    }

这是我们的 JS 函数，用于确保我们从已存在的选择列表项中获得唯一 ID。

    //function to find the max value from our already existing list
    function findMaxValue(element) {
        var maxValue = undefined;
        $('option', element).each(function() {
            var val = $(this).attr('value');
            val = parseInt(val, 10);
            if (maxValue === undefined || maxValue < val) {
                maxValue = val;
            }
        });
        return maxValue;
    }

最后，我们需要重写一些 css，以便我们注入(inject)到列表中的项目不会显示以供进一步选择。幸运的是，我们可以获取 select2 在选择项目时用于默认行为的禁用属性:

    .select2-container--default .select2-results__option[aria-selected=true] {
        display: none;
    }

此外，一些 css 使我在选择元素上的 html 看起来半像样:

    .tableSelect {
        min-width: 20px;
        height: 20px;
        border: 1px solid #fff;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .tableSelectGreen {
        background-color: green;
    }

    .tableSelectRed {
        background-color: red;
    }

    .tableSelectOrange {
        background-color: orange;
    }

    blockMe{
        min-height:20px;
        min-width:20px;
    }

综合起来:

 //this is where we will keep track of our selected values
        var collectionArray = [];

        //this is out initial array to feed into our select2 control
        //whereas id is the unique identifier of the position, simple text is the value you want to dispaly when selected, text is the html value in the dropdown
        //the text element has a your color blocks and each one has a on click element to pass the id and a numeric representation of the color into a js function. This blwon out further but keeping it simple for demo
        var data = [
            { id: 0, simpleText:'Account Executive',  text: '<div style="display:block; min-height:30px; cursor:default;"><div style="float:left;">Account Executive</div><div style="float:right;"><table><tr><td class="tableSelect tableSelectRed" onclick="select2Override(0,0)"></td><td class="tableSelect tableSelectOrange" onclick="select2Override(0,1)"></td><td class="tableSelect tableSelectGreen"onclick="select2Override(0,2)"></td></tr></table></div></div>' },
            { id: 1,simpleText:'Account Management',  text: '<div style="display:block; min-height:30px; cursor:default;"><div style="float:left;">Account Management</div><div style="float:right;"><table><tr><td class="tableSelect tableSelectRed" onclick="select2Override(1,0)"></td><td class="tableSelect tableSelectOrange"onclick="select2Override(1,1)"></td><td class="tableSelect tableSelectGreen" onclick="select2Override(1,2)"></td></tr></table></div></div>' }];

        //here we initialize our select2 object with our data array.
        $("#tag").select2({
            data: data,
            //these options are telling it to use html from the text element. They are required or else it will just generate your html as text
            templateResult: function (d) { return $(d.text); },
            templateSelection: function (d) { return $(d.text); },
            tags: true

        }).on("select2:selecting", function (e) {
            // make sure we are on the list and not within input box
            //this is overriding the default selection event of select2, we will hadle that in our own onclick function based upon the color box they selected
            if (e.params.args.originalEvent.currentTarget.nodeName === 'LI') {
                e.preventDefault();
            }
        }
        ).on('select2:unselecting', function (e) {
            //we are injecting another method here when the object is unselected. We want to remove it from our master list to prevent duplicate inputs on our add function
            removeFromList(e.params.args.data.id);
        });

        function removeFromList(id) {
            //actual remove from the selected list
            $('#tag option[value=' + id + ']').remove();
            //actual remove from the master collection to prevent dups
            collectionArray = collectionArray.filter(entry => entry.tagID != id)
        }

        function select2Override(id, color) {
            //our override function for when anyone selects one of the color boxes

            //first check if it is already in our master list, if so then dont add a dup, remove it!
            var doesExistsAlready = collectionArray.filter(entry => entry.type === id && entry.color === color);
            if (doesExistsAlready.length != 0) {
                for (var i = 0; i < doesExistsAlready.length; i++) {
                    removeFromList(doesExistsAlready[i].tagID);
                }
                
            } else {
                //its not found in our master list 
                //we need to get a unique if to accompy this entry, fund the highest existing value in the current list and add 1
                var lastID = findMaxValue($('#tag')) + 1;

                //push it to our master list
                collectionArray.push({ "type": id, "color": color, "tagID": lastID });

                //get the selected value from our initial list so we can pull out the "simple text" to display
                var check = $.grep(data, function (obj) { return obj.id === id; })[0];

                //decorate our selection with a color depending on what they selected
                var colorDisplay;
                switch(color) {
                  case 0:
                        colorDisplay = "red";
                    break;
                  case 1:
                    colorDisplay =  "orange"
                    break;
                  case 2:
                        colorDisplay =  "green";
                    break;
                }
                //prep our new select option with our new color, simple text and unique id and set to selected
                var newOption = new Option('<div style="color:' + colorDisplay + ';display:inline;">' + check.simpleText + '</div>', lastID, true, true);

                //append it to our list and call our change method so js reacts to the change
                $('#tag').append(newOption).trigger('change');
            }
        }

        //function to find the max value from our already existing list
        function findMaxValue(element) {
            var maxValue = undefined;
            $('option', element).each(function() {
                var val = $(this).attr('value');
                val = parseInt(val, 10);
                if (maxValue === undefined || maxValue < val) {
                    maxValue = val;
                }
            });
            return maxValue;
        }

        .tableSelect {
            min-width: 20px;
            height: 20px;
            border: 1px solid #fff;
            cursor: pointer;
            margin-bottom: 10px;
        }

        .tableSelectGreen {
            background-color: green;
        }

        .tableSelectRed {
            background-color: red;
        }

        .tableSelectOrange {
            background-color: orange;
        }

        blockMe{
            min-height:20px;
            min-width:20px;
        }

        .select2-container--default .select2-results__option[aria-selected=true] {
            display: none;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>

<select id="tag" style="width: 50%" multiple="multiple"></select>