Question

我有2个选择下拉列表，根据第一个下拉列表，下拉值为1。现在我想在第二个填充下拉列表中添加搜索过滤器。我是怎么做到的？我使用了许多插件用于搜索过滤器，例如 SOL ，但它不起作用。请帮忙。以下是我的代码..

HTML

<select name="industry" id="industry" class="industry" style="width:305px;" onchange="configureDropDownLists(this,document.getElementById('product_type')); func2();" required>
     <option value="" disabled="disabled" selected>Choose Industry*</option>
     <option value="Agriculture & Food">Agriculture & Food</option>
     <option value="Apparel, Textiles & Accessories">Apparel, Textiles & Accessories</option>
     <option value="Auto & Tranportation">Auto & Tranportation</option>
     <option value="Bags, Shoes & Accessories">Bags, Shoes & Accessories</option>
     <option value="Electronics">Electronics</option>
     <option value="Gifts, Sports & Toys">Gifts, Sports & Toys</option>
</select>

<select name="product_type" id="product_type" style="width:305px;">

</select>

的Javascript

function configureDropDownLists(ddl1,ddl2) {
    var AgricultureFood = ['Agricultural Growing Media', 'Agricultural Waste', 'Animal Products', 'Beans'];
    var ApparelTextilesAccessories = ['Apparel Design Services', 'Apparel Processing Services', 'Apparel Stock'];

    switch (ddl1.value) {
        case 'Agriculture & Food':
            ddl2.options.length = 0;
            for (i = 0; i < AgricultureFood.length; i++) {
                createOption(ddl2, AgricultureFood[i], AgricultureFood[i]);
            }
            break;
        case 'Apparel, Textiles & Accessories':
            ddl2.options.length = 0; 
            for (i = 0; i < ApparelTextilesAccessories.length; i++) {
                createOption(ddl2, ApparelTextilesAccessories[i], ApparelTextilesAccessories[i]);
            }
            break;

        default:
            ddl2.options.length = 0;
            break;
    }
}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

现在我想在第二选择下拉列表中添加搜索过滤器（ ID = product_type ）。提前致谢。

Answer 1

您可以通过实施jQuery 多选插件来实现目标。

以下是示例代码。您只需在下拉列表创建完成后调用此函数。

 <!--css for multiselect-->
 <link href="css/jquery.multiselect.css" rel="stylesheet" />
    <link href="css/jquery.multiselect.filter.css" rel="stylesheet" />
     <!--JS for multiselect-->
    <script src="js/jquery.multiselect.js"></script>
    <script src="js/jquery.multiselect.filter.js"></script>

<script type="text/javascript>    
    //Initialize first-time when dropdown created or on page load. 
        jQuery("#product_type").multiselect({
                minWidth: 360, multiple: false,
                selectedList: 1
            }).multiselectfilter({width:250});


    function configureDropDownLists(ddl1,ddl2) {
        var AgricultureFood = ['Agricultural Growing Media', 'Agricultural Waste', 'Animal Products', 'Beans'];
        var ApparelTextilesAccessories = ['Apparel Design Services', 'Apparel Processing Services', 'Apparel Stock'];

        switch (ddl1.value) {
            case 'Agriculture & Food':
                ddl2.options.length = 0;
                for (i = 0; i < AgricultureFood.length; i++) {
                    createOption(ddl2, AgricultureFood[i], AgricultureFood[i]);
                }
                break;
            case 'Apparel, Textiles & Accessories':
                ddl2.options.length = 0; 
                for (i = 0; i < ApparelTextilesAccessories.length; i++) {
                    createOption(ddl2, ApparelTextilesAccessories[i], ApparelTextilesAccessories[i]);
                }
                break;

            default:
                ddl2.options.length = 0;
                break;
        }
        jQuery('#product_type').multiselect('refresh');
    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
</script>

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#filter http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#refresh

如何在填充选择下拉列表中添加搜索过滤器

1 个答案: