選擇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當選項中設置動態

回答

相關問題