选择在动态填充选项时更新占位符文本答案

【问题标题】：Chosen updating the placeholder text when dynamically populating options选择在动态填充选项时更新占位符文本
【发布时间】：2015-05-22 17:19:46
【问题描述】：

我正在使用 Chosen，并且通过 AJAX 调用动态加载选项。一切正常，但如果 AJAX 调用的结果为空，我不知道如何更改占位符文本。

例如：

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

当没有选择任何内容时，该框有一个占位符，上面写着“进行选择”。如果 AJAX 调用返回 null，我想说“没有可用的选项”。

我希望这会起作用：

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

有什么想法吗？

【问题讨论】：

标签： javascript jquery ajax jquery-chosen

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在 Chosen 1.8.7（可能更早，尚未测试）中，set_default_text 函数由 chosen:updated 事件处理程序调用，专门检查 data-placeholder 属性，而不是 jQuery 数据（这是什么.data("placeholder", ...) 套）。所以，这就是你必须做的：

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

【讨论】：

【解决方案3】：

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

在这里拉小提琴给你看.....http://jsfiddle.net/mikeys4u/99Dkm/237/

【讨论】：

请添加一些关于您的解决方案的 cmet，说明它为什么以及如何解决问题

【解决方案4】：

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

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

请注意，访问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>

【讨论】：