jquery - 选择 jquery 中的多行选项

标签 jquery jquery-chosen

有没有办法为所选的 jquery 创建多行选项?我浏览了文档中的 options to be passed到所选的插件,但没有得到任何帮助。任何帮助表示赞赏。

更新:

添加了一些代码:

在js文件中:

$('.mySelect').chosen();

在 html 中:

<select class="mySelect" data-placeholder="Choose any food item">
 <option value="Mango"></option>
 <option value="Chocolate"></option>
 <option value="Milk"></option>
</select>

到目前为止我尝试过的是:

<option><span>Milk</span><br><span>Category-dairy</span></option>

但这不起作用,因为所选插件会将选项标记内的数据更新为 li 元素。

最佳答案

有一个选择的分支,允许您为选择选项指定模板。 https://github.com/thomasf1/chosen-with-templates

例如

<select data-placeholder="Choose your favorite candy..." class="chzn-select-template-example chzn-done" style="width: 350px; display: none;" tabindex="-1" id="sel4UA">
      <option value=""></option>
      <option data-type="chocolate" data-ico="http://cdn1.iconfinder.com/data/icons/winter_png/16/christmas_5.png" value="sel1">M&amp;Ms</option>
      <option data-type="fruity" data-ico="http://cdn1.iconfinder.com/data/icons/iconshock_vista_CharlieandtheChocolateFactory/png/24/CharlieandtheChocolateFactory1.png" value="sel2">Starburst</option>
      <option data-type="fruity" data-ico="http://cdn1.iconfinder.com/data/icons/winter_png/16/christmas_5.png" value="sel3">Skittles</option>
      <option data-type="chocolate" data-ico="http://cdn1.iconfinder.com/data/icons/fatcow/16/candy_cane.png" value="sel4">Reese's</option>
      <option data-type="chocolate" data-ico="http://cdn1.iconfinder.com/data/icons/winter_png/16/christmas_5.png" value="sel5">Snickers</option>
</select>

脚本

$(".chzn-select-template-example").chosen({
  template: function (text, value, templateData) {
    return [
      "<img src='" + templateData.ico + "' height='16' width='16'></img> " + text + "</i> value: " + value         
    ].join("");
  }
});

关于jquery - 选择 jquery 中的多行选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19951101/

相关文章:

jquery 模板的 jquery 委托(delegate)问题

javascript - Jquery——一键提交所有表单

javascript - 获取选择列表中最近添加/更改的项目(通过 jQuery 或 Angular JS)

javascript - jQuery-chosen - 将所选选项的自定义选项属性推送到列表

javascript - Jquery:Tipsy 不会显示在禁用的元素上

javascript - 当用户开始输入输入时更改 css

jquery - 设置多选框的高度

javascript - jQuery 选择了 max_selected_options

javascript - 从不同表中的数据创建单独的数组

javascript - 将选择添加到甜蜜警报