[英]jQuery-chosen - Push custom option attribute of selected option to list
I've an option list like bellow我有一个如下所示的选项列表
<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>
I can select multiple options using chosen plugin .我可以使用selected plugin选择多个选项。 Each selected value entered into new
<li>
element like the follow:每个选定的值都输入到新的
<li>
元素中,如下所示:
<li class="search-choice"><span>User</span><a class="search-choice-close" data-option-array-index="2"></a></li>
Is there any way to push data-user-id from the option to the above <li>
.有没有办法将 data-user-id 从选项推送到上面的
<li>
。
Can I do it without hacking chosen plugin?我可以在不破解所选插件的情况下做到这一点吗?
Below you will find my solution by changing a little bit chosen plugin
下面你会通过改变一点选择的插件找到我的解决方案
Inside with SelectParser.prototype.add_option
I got my custom attribute using jquery and then I've pushed it as an option.在
SelectParser.prototype.add_option
里面,我使用 jquery 获得了我的自定义属性,然后我将它作为一个选项推送。
The SelectParser.prototype.add_option
looks like: 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;
}
};
As you noticed I put only this user_id: $(option).attr('data-user-id'),
line of code.正如你注意到的,我只放了这个
user_id: $(option).attr('data-user-id'),
代码行。
Then to push the data-user-id to the <li>
list I add this line 'data-user-id': item.user_id
to Chosen.prototype.choice_build
so at then end it looks like:然后将 data-user-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);
};
That's it!就是这样! You can push as many custom attribute as you want with this way.
您可以通过这种方式推送任意数量的自定义属性。
I've tested this with chosen_v1.8.7.我已经用 selected_v1.8.7 对此进行了测试。 As @panagiotis-koursaris pointed on his answer, it's ok to add the line
user_id: $(option).attr('data-user-id')
to the first function:正如@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;
}
};
But also you need to add this line option_el.setAttribute("data-user-id", option.user_id);
但您还需要添加这一行
option_el.setAttribute("data-user-id", option.user_id);
to AbstractChosen.prototype.result_add_option:到 AbstractChosen.prototype.result_add_option:
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);
};
I would suggest using the value attribute instead of a data attribute.我建议使用 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>
And then you can retrieve the id using然后你可以使用
$('select').val(); //use a name or id attribute to make this selector more specific..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.