當選擇值作為另一個選擇的函數動態加載時，如何在沒有ctrl鍵的情況下選擇多個值

Question

我在Web應用程序中使用了“ wicket”框架。 我有兩個這樣的選擇：

<select wicket:id="brands" onchange="applyMultiSelection ();">
 <option value="volvo">Volvo</option>
</select>

<select wicket:id="models" id="models">
 <option value="A">A</option>
</select>

使用小門模型，在選擇第一個值之后，將動態加載第二個值。 第二個是多重選擇（由檢票口的ListMultipleChoice創建）。

為了在不按ctrl鍵的情況下選擇多個值，我在html頭中添加了以下內容：

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<style type="text/css">
    .multi-selection {
        background-color: Highlight;
        color: HighlightText;
    }
</style>

    <script type="text/javascript">
        // Applies multiselection on select tags
        var multiselection = function(){
            $("#models").MultiSelect({
                css_class_selected: "multi-selection"
            });
        };

        function applyMultiSelection () {
            $('#models').ready( multiselection() );
        }
    </script>

它似乎不起作用，我在靜態html中為多選擇嘗試了類似的方法，它允許我只用鼠標單擊就可以選擇多個值，因此我懷疑自己可能接近解決方案。 有任何想法嗎？

Answer 1

看起來您將代碼放在頭部分中，應該嘗試執行以下操作：

<script type="text/javascript">
    $(function(){
        // Applies multiselection on select tags
        var multiselection = (function(){
            $("#models").MultiSelect({
                css_class_selected: "multi-selection"
            })();
        };
    });
</script>

Answer 2

我認為主要問題是值是動態更新的，在您的代碼運行時select可能為空。 通過將功能合並為一個，可以大大縮短腳本。

$(function(){ // this is short for $(document).ready()
     function applyMultiSelection (){
         $("#models").MultiSelect({
             css_class_selected: "multi-selection"
         });
     };
});

如果您無法編輯腳本以添加觸發事件或類似事件，則建議使用以下插件。

https://github.com/hazzik/livequery/blob/master/jquery.livequery.js

該插件將檢查是否添加或創建了新的option元素。 現在，每次您動態添加新元素時，插件都應運行.MultiSelect()

$(function(){ 
   $("#models option").livequery(function () {
       $("#models").MultiSelect({
             css_class_selected: "multi-selection"
       });
   });
});

這是一個測試小提琴

Answer 3

嘗試2使用select2庫的select2multichoice。

http://ivaynberg.github.io/select2/

它非常有用且簡單集成。