选择2当选项中设置动态

当我创建动态的选择另一种选择2下拉驱动选择2的下拉列表中，为更新的下拉列表中allowClear按钮变为禁用allowClear未启用。选择2当选项中设置动态

它似乎没有，如果我建一个select选择2，消灭它，更新HTML，并重建它关系：

var enableSelect2 = function() { 
     $(this).select2({ 
      width: '200px', 
      allowClear: true, 
      minimumResultsForSearch: 7, 
      formatResult: function (result, container, query, escapeMarkup) { 
       var markup = []; 
       markMatchedSelect2Text(result.text, query.term, markup, escapeMarkup); 
       return markup.join(''); 
      } 
     }); 
    }, 
    populateDropdown = function() { 
     var filterBy = this.id, 
      t = $(this); 
     $.ajax({ 
      type: 'post', 
      url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(), 
      success: function (data) { 
       var toRebuild, 
        target; 
       if (filterBy === 'panel_id') { 
        toRebuild = $('#isp_id, #package_id'); 
        target = $('#isp_id'); 
       } else { 
        toRebuild = $('#package_id'); 
        target = $('#package_id'); 
       } 
       toRebuild.each(function() { 
        $(this).select2('destroy'); 
       }); 
       target.html(data); 
       if (filterBy === 'panel_id') { 
        $('#package_id').html($(document.createElement('option')).attr('value', 0).text('Select ISP first\u2026')); 
       } 
       toRebuild.each(enableSelect2); 
      } 
     }); 
    }; 

$('body').on('change', '#searchForm #isp_id, #searchForm #panel_id', populateDropdown);

或者，如果我使用JSON采用了隐藏式输入：

$(function() { 
    var data = [ 
     [{id:0,text:'black'},{id:1,text:'blue'}], 
     [{id:0,text:'9'},{id:1,text:'10'}] 
    ]; 

    $('#attribute').select2({allowClear: true}).on('change', function() { 
     $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()],allowClear: true}); 
    }).trigger('change'); 
});

http://jsfiddle.net/eGXPe/116/

为什么清除按钮消失任何想法？

编辑：

道歉，我没有澄清我的HTML。在我的代码，每个select有data-placeholder属性。这不是我提供的小提琴，因为它本来不是我的小提琴，而是从另一个SO问题借来的。我现在已经更新了数据占位符，小提琴，它的工作原理：http://jsfiddle.net/eGXPe/119/。

这里是我的html，我以前不树枝代码包括：

<li> 
    <label for="edit[panel_id]" class="hidden">Edit Panel ID?</label> 
    <input type="checkbox" id="edit[panel_id]" name="edit[panel_id]" /> 
    <label for="panel_id">Panel:</label> 
    <select id="panel_id" name="panel_id" data-placeholder="Select a panel"> 
     <option></option> 
     {% for panel in related.panel_id %} 
      <option value="{{ panel.value }}">{{ panel.name }}</option> 
     {% endfor %} 
    </select> 
</li> 
<li> 
    <label for="edit[isp_id]" class="hidden">Edit ISP ID?</label> 
    <input type="checkbox" id="edit[isp_id]" name="edit[isp_id]" /> 
    <label for="isp_id">ISP:</label> 
    <select id="isp_id" name="isp_id" data-placeholder="Select an ISP"> 
     <option></option> 
     {% for isp in related.isp_id %} 
      <option value="{{ isp.value }}">{{ isp.name }}</option> 
     {% endfor %} 
    </select> 
</li> 
<li> 
    <label for="edit[package_id]" class="hidden">Edit Package ID?</label> 
    <input type="checkbox" id="edit[package_id]" name="edit[package_id]" /> 
    <label for="package_id">Package:</label> 
    <select id="package_id" name="package_id" data-placeholder="Select a package"> 
     <option></option> 
     <option value="0">Select ISP first&hellip;</option> 
    </select> 
</li>

来源

2013-11-04 Derek S. Henderson

似乎无法找到“allowClear”在你的HTML呢？ –

@Baszz，它在'enableSelect2'方法中。 –

什么_部分的“此选项仅当占位符指定了” _ [文件]中的（http://ivaynberg.github.io/select2/#documentation）你不明白...？ – CBroe

作为stated in the doc，allowClear需要placeholder和placeholder需要相应option值（不能为空字符串，但可成为一个单一的空间）。

allowClear

此选项仅指定的占位符时的作品。

占位符

注意，因为浏览器假定第一个选项元素被选中在非多值选择框的空第一选项元素必须是提供（）为占位符工作。

所以，你的代码应该是这样的：

$('#attribute').select2({ 
    allowClear: true, 
    placeholder: "Select an attribute" 
}).on('change', function() { 
    $('#value') 
     .removeClass('select2-offscreen') 
     .select2({ 
      data:data[$(this).val()], 
      allowClear: true, 
      placeholder: "Select a value" 
     }); 
}).trigger('change');

http://jsfiddle.net/eGXPe/118/

来源

2013-11-04 11:01:09 Shikiryu

这个问题不是占位符，我通过'data-placeholder'属性在我的html中拥有占位符，但空的''。我有一个文本选项，没有任何价值，但那还不够好。感谢您的回答。 –

男人，那个占位符给了我更多的聚会。什么是不合逻辑的解决方案... – mArtinko5MB

要记住的另一个重要的事情是占位符不能由空字符串（如此处所述https://github.com/ivaynberg/select2/issues/1785）。如果不需要占位符，但allowClear选项是可用的，则可以将占位符设置为空白字符串（例如单个空格）。 – jahu

'选择二：在allowClear选项应结合使用' + '与placeholder选项。'

来源

2017-03-02 13:44:01

选择2当选项中设置动态

回答

相关问题