1

Jquery Multiselect プラグインを使用して、選択ドロップダウンをファイリングしています。このプラグインは正常に動作しますが、フィルター ボックスに何かを入力しても何も表示されないということは、入力した単語が表示されないことを意味します。しかし、ファイルからbootstrap.min.cssを削除すると、機能し、タイプワードが表示されます。複数選択フィルター プラグインが使用しているJquery UIが bootstrap.min.css と競合していると思いますが、わかりません。私を助けてください。以下は私のコードで、スクリーンショットも確認​​してください。

ここに画像の説明を入力

HTML

<link rel="stylesheet" type="text/css" href="jquery.multiselect_1.css" />
<link rel="stylesheet" type="text/css" href="jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" href="bootstrap.min.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect_1.js"></script>
<script type="text/javascript" src="jquery.multiselect.filter.js"></script>

<select name="industry" id="industry" class="industry" style="width:305px;" onchange="configureDropDownLists(this,document.getElementById('product_type'));" 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>
  </select>

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

    </select>

Javascript

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);

    }

前もって感謝します。

4

1 に答える 1

0

z-indexに高値を追加してみてください#product_type

#product_type{z-index:99999999;}
于 2016-01-19T10:54:43.007 に答える