[英]How to add a option to a select box in the correct position dynamically?
給出下面的選擇框。 我希望能夠動態添加新選項。
<select id="user_department_id" name="user[department_id]">
<option value=""> </option>
<option value="9">AAAAA</option>
<option value="11">BBBBB</option>
<option value="10">G</option>
<option value="12">Z</option>
<option value="">--</option>
<option value="add">Add a New</option>
</select>
我一直在使用以下內容添加新選項:
$('#user_department_id')
.prepend($("<option></option>")
.attr("value",data.id)
.text(data.title)
);
這里的問題是它位置不自然,它位於空占位符選項之上,而不是按字母順序排序。 有沒有一種神奇的方法可以在正確的位置添加新的選擇選項?
謝謝
這將插入一個新的選項值(假設它已經排序)
$('#yourselectID option').each(function()
{
var option = $(this).text();
option = option.toLowerCase();
var test = option.toLowerCase();
if ( option > test)
{
$(this).before('<option value="'+test+'">' + test+ '</option>');
return false;
}
});
我想你可以使用.after('blah')和你描述的選擇器。
例如:
$('#user_department_id option[value="12"]').after('<option value="13">Q</option>')
有用嗎?
正如我的評論中所提到的,您可以刪除不想排序的選項,然后將其添加回來。
注意:以下內容適用於您的情況,因為您需要--
並在最后Add New
。
var selElem = document.getElementById('user_department_id')
var tmpAry = [];
var igOpt = [];
for (var i = 0; i < selElem.options.length; i++) {
if ($(selElem.options[i]).hasClass('ig')) {
igOpt.push([selElem.options[i].text,
selElem.options[i].value]);
continue;
}
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
//merge with ignored options
tmpAry = tmpAry.concat(igOpt);
//remove options
$(selElem).empty();
for (var i = 0; i < tmpAry.length; i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
您可以使用下划線的sortedIndex
來確定插入項目的位置,然后使用jquery的after
函數將其插入該位置。 這假設您要按字母順序按選項文本排序:
var option = '<option value="' + data.id + '">' + data.title + '</option>';
var index = _.sortedIndex($('#user_department_id option'), option, function(item) {
return $(item).text();
});
if(index === 0) {
$('#user_department_id').prepend(option);
} else {
$('#user_department_id option').eq(index - 1).after(option);
}
不是很優雅,但這應該做到:
$('#user_department_id option').each(function() {
if(this.text > data.title) {
$(this).before('<option value="' + data.id + '">' + data.title + '</option>');
return false;
}
});
將選項保留在一個對象數組中,並從該對象生成選擇。 然后將新項目添加到該陣列並重新生成您的選擇。
$(function() {
// Any options always on the top
var topOptions = '<option value=""> </option>';
// Your middle, sorted options
var options = [{val: 9, text: "AAAAA"}, {val: 11, text: "BBBBB"},{val: 10, text: "G"},{val: 12, text: "Z"}];
// Any options always on the bottom
var bottomOptions = '<option value="">--</option><option value="add">Add a New</option>';
// Function to populate the select options from above data
function populateOptions(element, options) {
// Sort options
options = options.sort(function(a, b) {
return a.text.toLowerCase() > b.text.toLowerCase();
});
$(element).html('').append(topOptions);
for (var i = 0; i < options.length; i++) {
$('<option>').attr("value", options[i].val).text(options[i].text).appendTo($(element));
}
$(element).append(bottomOptions);
}
// Start by populating the select
populateOptions('#user_department_id', options);
// Add and repopulate when add requested
$('#user_department_id').on('change', function() {
if ($(this).val() == "add") {
// Add option to list
options.push({val: data.id, text: data.text});
// Repopulate select
populateOptions(this, options);
// Select the new item
$(this).val(data.id);
}
});
});
演示: http : //jsfiddle.net/kfC3S/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.