0

我有多项选择列表，它工作正常，但它现在包含大约 70 个选项，可以从大约 12 个类别中进行选择——我在互联网上搜索了一个可以使列表更加用户友好的解决方案。

如果我能够拥有包含 12 个类别的选择列表，并且在其中选择它们时，它们会层叠到它们的子选项中，那将是完美的。然而，棘手的部分是这必须在同一领域内完成。

有没有人有类似的要求或知道如何使这成为可能？

谢谢你

这是我目前拥有的多选选择列表的代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
<script src="sc_json2.js" type="text/javascript"></script>

<meta charset="utf-8"></head>
<body style="margin: 0px; border: 0px currentColor; font-family: Segoe UI; font-size: 11px; background-color: rgb(246, 248, 250);" onload="onload()">
<div id="MultiSelectField"></div>
<script type="text/javascript">

        var FORM_TYPE_CREATE = 1;
        var FORM_TYPE_UPDATE = 2;
        var FORM_TYPE_READ_ONLY = 3;
        var FORM_TYPE_DISABLED = 4;
        var FORM_TYPE_QUICK_CREATE = 5;
        var FORM_TYPE_BULK_EDIT = 6;

        var var_sc_optionset;
        var var_sc_optionsetvalue;
        var options;
        var checkedValues;
        var isDirty = false;
        var html = "";

        function onload() {
            var formType = parent.Xrm.Page.ui.getFormType();
            if (formType == FORM_TYPE_BULK_EDIT) {
                displayMessage();
            }
            else {
                init();
            }
        }

        function init() {
            getParameters();
            getOptionSetValues();
            getCheckedValues();
            convertToMultiSelect();

        }

        function displayMessage() {
            MultiSelectField.innerHTML = "This field cannot be displayed or edited in this form mode.";
        }

        function getParameters() {
            var querystring = unescape(window.location.search.replace('?', '').replace('data=', ''));
            var params = querystring.split(',');

            for (var i = 0; i < params.length; i++) {
                if (i == 0) {
                    var_sc_optionset = params[i];
                }
                else if (i == 1) {
                    var_sc_optionsetvalue = params[i];
                }
            }
        }

        //populate option-set values and integers
        function getOptionSetValues() {
            options = parent.Xrm.Page.getAttribute(var_sc_optionset).getOptions();
        }

        function getCheckedValues() {
            var dirtyCheckedOptions = parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).getValue();
            if (dirtyCheckedOptions != null) {
                checkedValues = dirtyCheckedOptions.split(';');
            }
            else {
                checkedValues = '';
            }

        }

        //Method to convert an optionset to multi select Option Set
        function convertToMultiSelect() {


            for (var i = 0; i < options.length - 1; i++) {
                var pOption = options[i];
                if (!isChecked(pOption.text))
                    html += "<input type='checkbox' class='multiselect_cb' onclick='makeDirty()' style='border:none; width:25px; align:left;' title='" + pOption.text + "'/>";
                else
                    html += "<input type='checkbox' class='multiselect_cb' checked='checked' onclick='makeDirty()' style='border:none; width:25px; align:left;' title='" + pOption.text + "'/>";

                html += "<label>" + pOption.text + "</label>";
                if (i != options.length - 2) {
                    html += "<br/>"; //it's a 'br' flag 
                }
            }
            MultiSelectField.innerHTML = html;

        }

        function makeDirty() {
            isDirty = true;
        }

        function isChecked(ptext) {
            for (var i = 0; i < checkedValues.length; i++) {
                if (checkedValues[i] == ptext)
                    return true;
            }
            return false;
        }

        function saveMultiSelect() {
            if (isDirty) {
                var divElement = document.getElementById("MultiSelectField");
                var result = '';

                for (var i = 0; i < divElement.childNodes.length; i++) {
                    if (divElement.childNodes[i].type == "checkbox" && divElement.childNodes[i].checked) {
                        result += divElement.childNodes[i].title + ";";
                    }
                }
                //clear out the previous results from the field
                parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue("");
                //populate var_sc_optionsetvalue with the checked values
                parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue(result);
                isDirty = false;
            }
        }

    </script>
</body></html>
4

0 回答 0