jQuery choisi - poussoir attribut option personnalisée de l'option sélectionnée à la liste

Question

J'ai une liste d'options comme ci-dessous

<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> 

je peux sélectionner plusieurs options à l'aide chosen plugin. Chaque valeur sélectionnée est entrée en nouvel élément <li> comme le suivi:

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

Est-il possible de pousser les données utilisateur-id de l'option à l'<li> ci-dessus. Puis-je le faire sans pirater le plugin choisi?

Ci-dessous vous trouverez ma solution en changeant un peu plug-in choisi

Answer 1

intérieur avec SelectParser.prototype.add_option j'ai obtenu mon attribut personnalisé à l'aide jquery et je l'ai poussé comme une option.

Le SelectParser.prototype.add_option ressemble:

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; 
    } 
}; 

Comme vous remarqué que je ne mets que cette ligne user_id: $(option).attr('data-user-id'), de code.

ensuite pour pousser les données utilisateur-id à la liste <li> ajouter cette ligne 'data-user-id': item.user_id-Chosen.prototype.choice_build donc à la fin il ressemble:

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); 
    }; 

Ca y est! Vous pouvez pousser autant d'attributs personnalisés que vous le souhaitez de cette façon.

Answer 2

Je suggère d'utiliser l'attribut de valeur au lieu d'un attribut de données.

<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> 

Et vous pouvez récupérer l'identifiant à l'aide

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