Question

我正在使用Chosen，我通过AJAX调用动态加载选项。一切正常，但如果AJAX调用的结果为空，我无法弄清楚如何更改占位符文本。

例如：

<select name="test" multiple="multiple" data-placeholder="Make a selection" 
    id=MyChosenSel"></select>

当没有选择任何内容时，该框有一个占位符，其中显示＆＃34;进行选择＆＃34;。我希望有这样的说法＆＃34;没有可用的选项＆＃34;如果AJAX调用返回null。

我希望这可行：

$('#MyChosenSel').data('placeholder',"No Options").trigger("chosen:updated");

有什么想法吗？

Answer 1

$("#MyChosenSel").chosen({
  allow_single_deselect:true,
  disable_search_threshold: 10,
  no_results_text: "No options available",
  width: "25%"
});

在这里向你展示..... http://jsfiddle.net/mikeys4u/99Dkm/237/

Answer 2

This answer阐明了如何使用jQuery更改data-placeholder标记上的SELECT属性。

在下面的代码中，您可以看到如何使用jQuery或dataset的简单javascript SELECT属性来更改所选select的占位符的值。

请注意，dataset对象中访问占位符值的关键是placeholder（而不是data-placeholder）。

希望这对任何人都有好处。

$('SELECT').chosen({width: '80%'});

$('BUTTON#jQuery').on('click', function() {
  $('SELECT').attr('data-placeholder', 'Placeholder updated with jQuery!');
  $('SELECT').trigger('chosen:updated');
});

$('BUTTON#dataset').on('click', function() {
  $('SELECT')[0].dataset['placeholder'] = 'Placeholder updated with dataset obj!';
  $('SELECT').trigger('chosen:updated');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.js"></script>
<SELECT data-placeholder="Placeholder before chosen:updated">
<OPTION></OPTION>
<OPTION>1</OPTION>
<OPTION>2</OPTION>
</SELECT>
<BUTTON id="jQuery">Click for updating placeholder with jQuery</BUTTON>

<BUTTON id="dataset">Click for updating placeholder with dataset hash</BUTTON>

Answer 3

要更改选择的文本占位符，您应该在所选配置中使用 placeholder_text 选项，例如使用：

$("#myChosen").chosen({
   placeholder_text:"my custom placeholder text"
 });

Answer 4

在拣选1.8.7（可能更早，没有测试它）时，set_default_text功能，由chosen:updated的事件处理程序，具体地检查被称为data-placeholder属性，而不是jQuery数据（.data("placeholder", ...)的设置）。所以，这就是您要做的：

$("#MyChosenSel")
    .attr("data-placeholder", "No Options")
    .trigger("chosen:updated");

选择动态填充选项时，选择更新占位符文本

4 个答案: