在选择框中填充optgroup上的选项,选项数据相互覆盖

时间:2018-10-09 12:34:36

标签: javascript java jquery html5

更新: 我从

更改为
 $('select[name=productSelect]').setOptions(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]);

 $('select[name=productSelect]').prepend(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]);

现在我收到此错误:

error: TypeError: this.split is not a function.

在这里我进行分割:

setOptions: function (inOptions, forceEmpty) {
        return this.each(function () { ...

            $.each(options, function () { //Here the split
                parts = this.split('|', 2);
                if (parts.length === 1) parts.push(parts[0]);
                if (parts[0] === 'optgroup') html.push('<optgroup label="' + parts[1] + '">');
                else if (parts[0] === '/optgroup') html.push('</optgroup>');
                else html.push('<option value="' + parts[1] + '">' + ($this.hasClass('no-translate-children') ? parts[0] : translator.getTranslation(parts[0])) + '</option>');
            });
            $this.html(html.join('')).val(value);
            if(options.length < 2) $this.find('option').first().prop('selected', 'selected'); // if only one option -> select it
            if ($this.val() !== value) $this.trigger('change'); // if some value is not an option, value will be removed
            $this.trigger('elementChanged');
        });
    },

我正在编写一个用于在选择框中设置选项的函数,这些选项将被分隔在optgroups中。到目前为止,我确实必须填充一些选项,但是其中一些正在被覆盖,例如不显示:

$('select[name=productSelect]').setOptions(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]);

不填充,我也无法将它们隔离在optgroup中,所有填充的选项都在没有optgroup的情况下填充。我在做什么错?更好的方法来在optgroup中设置选项?

这是我的javascript:

setProductSelectOpt: function (AllianceUNID, PartnerUNID) {

        var productSelect = $('select[name=productSelect]').val();
        var alliances = $("[name$=productSelect]");
        dbService.dbLookup("main", "Alliances", 2, null).done(function (products) {
            alliances.setOptions(products, true);
        });

        var partners = $("[name$=productSelect]");
        if (products.alliances) {
            dbService.dbLookup("main", "PartnersAlliance", 3, products.alliances).done(function (products) {
                partners.setOptions(products, true);
            });
        } 

        $.when(partners, alliances).done(function(a,p){
            $('select[name=productSelect]').setOptions(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]);
            $('select[name=productSelect] optgroup[label=Alliances]').setOptions(a);
            $('select[name=productSelect] optgroup[label=Partners]').setOptions(p);
        });
}, 

和我的html:

<div class="span4 internal">
        <label>Product selection
            <select name="productSelect">
                    <option value="">-
                    <optgroup label="" name="">
                    </optgroup>
                    <optgroup label="Alliances">
                    </optgroup>
                    <optgroup label="Partners">
                    </optgroup>
            </select>
        </label>
    </div>

任何建议都会非常有用!谢谢

1 个答案:

答案 0 :(得分:0)

固定:这是我的解决方案:

setProductSelectOpt: function () {
        var alliances = dbService.dbLookup("main", "vwAlliances", 2, null),
        partners = dbService.dbLookup("main", "vwPartnersByAlliance", 3, products.alliances);
        $.when(alliances, partners).done(function(a,p){
            var data = ["All products|ALL", "Products visible to all|VISIBLETOALL=1"];
            data.push("optgroup|Alliance");
            data.pushAll(a[0]);
            data.push("/optgroup|");
            data.push("optgroup|Partners");
            data.pushAll(p[0]);
            data.push("/optgroup|");
            $('select[name=productSelect]').setOptions(data);
        });
    },