javascript – 带有jquery的多选下拉列表

2023年6月13日 146次阅读

目前我正在自定义多个选择下拉列表
Multiple Selection Plugin,这些是我将在我的自定义选择中应用的行为：

>选择父级时,将选择所有子项.
>选择所有孩子后,也会选择父母,
否则如果取消选择其中一个孩子,那么父母也将被取消选择.
>选择所有孩子后,应该只有所选字段中显示的父母姓名.
>子级别也应该作为第1级.

(1),(2)和(4)我已经完成了它.但对于(3),我还没有提出任何解决方案.

这是多选的示例json字符串：

var _str = '{"10":{"0":"0","1":"DISPONIBILITES","2":"t","style":"font-weight: bold;"},"16":{"0":"0","1":"TRESORERIE NETTE","2":"t","style":"font-weight: bold;"},...."}}}';

这是我创建的https://jsfiddle.net/skL589uu/7/.

如果有人在这里可以给我一些想法,那将是很棒的.

最佳答案 您不必为此编写任何自定义逻辑,multi-select.js提供了一个名为optGroups的功能.

只需将HTML中父组下的子项分组,其余部分都要小心.

这是官方文档的链接,Multi-select OptGroups

HTML代码：

  <select multiple="multiple">
    <optgroup label="Group 1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </optgroup>
    <optgroup label="Group 3">
      <option value="15">15</option>
    </optgroup>
  </select>

JQUERY CODE：

$(function() {
   $("select").multipleSelect({
     multiple: true,
     multipleWidth: 55,
     width: '100%'
   });
});

Live Demo @ JSFiddle

点赞