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

Question

我有一个如下的选项列表

<select data-placeholder="Choose users" style="width:350px;" multiple class="chosen-select" tabindex="8">
    <option data-user-id="1">User1</option>
    <option data-user-id="3">User2</option>
    <option data-user-id="6">User3</option>
    <option data-user-id="14">User4</option>
</select>

我可以使用已选择的插件选择多个选项。 每个选择的值都会输入到新的<li>元素中，如下所示：

<li class="search-choice"><span>User</span><a class="search-choice-close" data-option-array-index="2"></a></li>

有没有办法将选项中的data-user-id推送到上面的<li>中。

我能否在不篡改chosen插件的情况下完成它？

下面是通过略微更改chosen插件来实现的解决方案。

- Panagiotis Koursaris

---

我在 chosen 中找不到任何默认的属性/方法来完成这项工作。你必须使用 jQuery 自定义代码来实现它。 - Mohammad

@Mohammad 谢谢。 - Panagiotis Koursaris

Answer 1

在SelectParser.prototype.add_option函数中，我使用jQuery获取了自定义属性，然后将其作为选项添加。

SelectParser.prototype.add_option函数的代码如下：

SelectParser.prototype.add_option = function(option, group_position, group_disabled) {
  if (option.nodeName.toUpperCase() === "OPTION") {
    if (option.text !== "") {
      if (group_position != null) {
        this.parsed[group_position].children += 1;
      }
      this.parsed.push({
        user_id: $(option).attr('data-user-id'),
        array_index: this.parsed.length,
        options_index: this.options_index,
        value: option.value,
        text: option.text,
        html: option.innerHTML,
        title: option.title ? option.title : void 0,
        selected: option.selected,
        disabled: group_disabled === true ? group_disabled : option.disabled,
        group_array_index: group_position,
        group_label: group_position != null ? this.parsed[group_position].label : null,
        classes: option.className,
        style: option.style.cssText
      });
    } else {
      this.parsed.push({
        array_index: this.parsed.length,
        options_index: this.options_index,
        empty: true
      });
    }
    return this.options_index += 1;
  }
};

正如您所注意到的，我只放置了这一行代码：user_id: $(option).attr('data-user-id'),。

然后为了将data-user-id推送到

列表中，我在Chosen.prototype.choice_build中添加了这一行'data-user-id': item.user_id，最终它看起来像：

  Chosen.prototype.choice_build = function(item) {
      var choice, close_link,
        _this = this;
      choice = $('<li />', {
        "class": "search-choice"
      }).html("<span>" + (this.choice_label(item)) + "</span>");
      if (item.disabled) {
        choice.addClass('search-choice-disabled');
      } else {
        close_link = $('<a />', {
          "class": 'search-choice-close',
          'data-option-array-index': item.array_index,
          'data-user-id': item.user_id
        });
        close_link.bind('click.chosen', function(evt) {
          return _this.choice_destroy_link_click(evt);
        });
        choice.append(close_link);
      }
      return this.search_container.before(choice);
    };

就是这样！您可以使用此方法推送任意数量的自定义属性。

- Panagiotis Koursaris

Answer 2

我已经测试过这个代码，使用的是chosen_v1.8.7版本。正如@panagiotis-koursaris在他的回答中指出的那样，在第一个函数中添加以下代码行是可以的：user_id: $(option).attr('data-user-id')

SelectParser.prototype.add_option = function(option, group_position, group_disabled) { 
if (option.nodeName.toUpperCase() === "OPTION") { 
    if (option.text !== "") { 
      if (group_position != null) { 
        this.parsed[group_position].children += 1; 
      } 
      this.parsed.push({ 
        user_id: $(option).attr('data-user-id'), 
        array_index: this.parsed.length, 
        options_index: this.options_index, 
        value: option.value, 
        text: option.text, 
        html: option.innerHTML, 
        title: option.title ? option.title : void 0, 
        selected: option.selected, 
        disabled: group_disabled === true ? group_disabled : option.disabled, 
        group_array_index: group_position, 
        group_label: group_position != null ? this.parsed[group_position].label : null, 
        classes: option.className, 
        style: option.style.cssText 
      }); 
    } else { 
      this.parsed.push({ 
        array_index: this.parsed.length, 
        options_index: this.options_index, 
        empty: true 
      }); 
    } 
    return this.options_index += 1; 
  } 
};

但是你还需要在AbstractChosen.prototype.result_add_option中添加以下代码行 option_el.setAttribute("data-user-id", option.user_id);：

AbstractChosen.prototype.result_add_option = function(option) {
      var classes, option_el;
      if (!option.search_match) {
        return '';
      }
      if (!this.include_option_in_results(option)) {
        return '';
      }
      classes = [];
      if (!option.disabled && !(option.selected && this.is_multiple)) {
        classes.push("active-result");
      }
      if (option.disabled && !(option.selected && this.is_multiple)) {
        classes.push("disabled-result");
      }
      if (option.selected) {
        classes.push("result-selected");
      }
      if (option.group_array_index != null) {
        classes.push("group-option");
      }
      if (option.classes !== "") {
        classes.push(option.classes);
      }
      option_el = document.createElement("li");
      option_el.className = classes.join(" ");
      if (option.style) {
        option_el.style.cssText = option.style;
      }
      option_el.setAttribute("data-option-array-index", option.array_index);
      // Add the line below
      option_el.setAttribute("data-user-id", option.user_id);
      option_el.innerHTML = option.highlighted_html || option.html;
      if (option.title) {
        option_el.title = option.title;
      }
      return this.outerHTML(option_el);
    };

- miguel.angel

Answer 3

我建议使用value属性而不是data属性。

<select data-placeholder="Choose users" style="width:350px;" multiple class="chosen-select" tabindex="8">
    <option value="1">User1</option>
    <option value="3">User2</option>
    <option value="6">User3</option>
    <option value="14">User4</option>
</select>

然后您可以使用以下方法检索id

$('select').val(); //use a name or id attribute to make this selector more specific..

- Pat Eidt