检测下拉列表是否为多select

Detect if a dropdown list is a multi-select

我有一个通用的下拉列表填充脚本,它使用从各种 jquery 调用返回的选项填充 select。它目前适用于单个 selection。我需要向它添加填充多 select 的能力,它按原样工作,但我不想包括初始 * 请选择 * 选项。 我正在寻找 jQuery 或普通 Javascript 解决方案。

if (dropdown != null) {
    var regList = document.getElementById(dropdown);
    regList.options.length = 0;
    var opt = document.createElement("option");

    // ** if the dropdown is *not* a multiple="multiple", 
    // add the first option as an empty value

    opt.text = " -- Select --";
    opt.value = "";
    regList.options.add(opt);

    // **

    // loop thorugh child nodes and fill dropdown.
    $.each(arg.d, function () {
        opt = document.createElement("option");
        opt.text = this;
        opt.value = this;
        regList.options.add(opt);
    });
    $('.SpinImage').remove();
}

您是否使用插件或库来呈现下拉菜单? chosen library has support for modifying or removing what they call the default text。在你的例子中 "Please Choose" string.

您可以检查 multiple 属性是否存在,如果它存在,它的值是否为真,方法如下:

if(!regList.hasAttribute("multiple") && !regList.getAttribute("multiple")) {
    opt.text = " -- Select --";
    opt.value = "";
    regList.options.add(opt);
}

你可以查看对象的.multiple属性

var isMulti = document.getElementById('selectId').multiple; // true/false

jQuery 你可以做 .prop('multiple');

$('#selectId').prop('multiple');

http://jsfiddle.net/31eLyzb3/4/

/*
    Using jQuery, finds and populates the selects on the page.
*/
(function populateAll() {
    /* Here's our options info */
    var opts = {
        'volvo': 'Volvo',
        'saab' : 'Saab',
        'opel' : 'Opel',
        'audi' : 'Audi'
    };
    /*
        This function, given a jQuery select item, and options list, populates it.
        If it is a single-select, it adds a ---Select---/empty value as the first option.
    */
    function populate(listBox, options) {
        var option = null;
        if (listBox.prop('multiple') === false) {
            option = document.createElement('option');
            option.text = '---Select---';
            option.value = '';
            listBox.append(option);
        }
        $.each(options, function (value, label) {
            option = document.createElement('option');
            option.text = label;
            option.value = value;
            listBox.append(option);
        });
    }
    /* Find all select tags on page and populate with 'opts' data */
    $('select').each(function() {
        populate($(this), opts);
    });
})();