2016-07-06 100 views
1

我已經像波紋管jQuery的選擇 - 選擇的選項的推送定製選項屬性列出

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

一個選項列表,我可以使用chosen plugin選擇多個選項。進入新<li>元素,如按照每個選擇的值:

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

有沒有辦法從選項推送數據用戶ID上述<li>

我可以做到這一點沒有黑客選擇插件?

下面你會發現通過改變一點點選擇的插件

+0

我無法在'selected'中找到任何默認屬性/方法來完成這項工作。你不得不使用jquery自定義代碼來做到這一點。 – Mohammad

+0

@穆罕默德謝謝。 –

回答

0
SelectParser.prototype.add_option

裏面我使用jQuery得到了我的自定義屬性,然後我又將其作爲一個選項的ID。

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'),行代碼。

然後將數據用戶ID推向<li>列表我'data-user-id': item.user_id加入這一行Chosen.prototype.choice_build因此在隨後結束它看起來像:

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

這就是它!你可以用這種方式按你想要的那樣推送儘可能多的自定義屬性。

0

我會建議使用的價值屬性,而不是數據的屬性我的解決方案。

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

然後你可以檢索使用

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