Question

我附上表格＆amp;它包含select - 我正在使用jQuery select plugin Chosen。

与预期的一样，jQuery Chosen下拉列表不起作用（因为它附加了＆jQuery并没有自动附加，对吗？）。

我尝试过：

jQuery('#color').chosen().trigger("chosen:updated");但似乎它只有在你动态添加更多options时才有用，似乎并没有内置的选择功能适用于这种情况。 结果：绝对没有。

在Chosen jQuery code下添加了jQuery append function。 结果：它将选择加到select 2次，第1是＆＃34;原来＆＃34;哪个不起作用＆amp;第二个工作（如果有2个相同的渲染下拉菜单，并且一个不起作用，则不是很有用）..

 jQuery('.add-color').click(function() {
      colorGroup = jQuery('.color-item').html();
      jQuery('#color').append('<div class="color-item row">'+colorGroup+'</div>');

          jQuery('select').chosen({
              disable_search: false,
              disable_search_threshold: 5,
              width: '100%'
           });
 });

还尝试将Chosen jQuery code与on()结合起来 - 它没有成功解决问题＆amp;生成的错误，我可能做错了。 结果：错误！

 // Tried something like this
 jQuery(document).on('chosen', 'select', function({
     disable_search: false,
     disable_search_threshold: 10,
     width: '100%'
 });

 // Like you can see, it doesn't work out very well & Im not that 
 // good yet to combine these two - function works differently than Chosen

问题：如果选择附加或动态加载，如何选择工作？

jQuery追加功能：

jQuery('.add-color').click(function() {
    colorGroup = jQuery('.color-item').html();
    jQuery('#color').append('<div class="color-item row">'+colorGroup+'</div>');
});

在页面加载时选择jQuery：

jQuery('select').chosen({
   disable_search: false,
   disable_search_threshold: 5,
   width: '100%'
});

HTML：

    <div id="color">
        <div class="color-item row">
            <div class="form-group col-sm-4">
                <select name="color-type[]">
                    <option value=""><?php _e('Color', 'tt'); ?></option>
                    <option value="1"><?php _e('Red', 'tt'); ?></option>
                    <option value="2"><?php _e('Blue', 'tt'); ?></option>
                    <option value="3"><?php _e('Black', 'tt'); ?></option>
                    <option value="4"><?php _e('White', 'tt'); ?></option>
                    <option value="5"><?php _e('Yellow', 'tt'); ?></option>
                    <option value="6"><?php _e('Pink', 'tt'); ?></option>
                    <option value="7"><?php _e('Green', 'tt'); ?></option>
                </select>
            </div>

            <div class="form-group col-sm-4">
            <input type="text" name="color-name[]" id="color-name" class="form-control"/>
            </div>

            <div class="form-group col-sm-4">
            <input type="number" name="color-code[]" id="color-code" class="form-control"/>
            </div>         
        </div>

        <div class="clearfix col-sm-12">
            <a class="add-color btn"><?php _e( 'Add Color','tt' ); ?></a>
        </div>

    </div>

Answer 1

首先绑定每次点击的文件

jQuery(document).on('click','.add-color',function() {

附加时jQuery下拉列表无法正常工作

1 个答案: