我试图根据用户选择的选项动态地从JavaScript对象中对数据进行排序。如果用户选择ID，则数据应按ID排序，也可以按名称排序，如果切换Select元素则来回。坚持创建一个函数并在Select上附加一个onchange方法，但它显然不起作用。有人可以帮忙吗？另外，我面临的主要问题是如何自定义options元素。
//sorting based on selection which is the issue
function sorting() {
var my_options = $("#sort option");
var selected = $("#sort").val();
my_options.sort(function(a, b) {
if (a.text > b.text) return 1;
if (a.text < b.text) return -1;
return 0
})
$("#sort").empty().append(my_options);
$("#sort").val(selected);
}
答案 0 :(得分：3)
至少有两种方法可以解决这个问题：
以下实现选项1。
$( "#selectionSomething" ).selectmenu({
change: function(){
$(this).trigger('blur')
}
});
和.map()将原始对象转换为员工数组。这样就可以使用Object.keys()方法。.sort()使用数字排序，否则它会进行基于文本的排序（基于文本的排序甚至适用于日期，因为YYYY- MM-DD格式）。
IDvar employeesById = {
"8110923": { "Name": "John Glanton", "Position": "Chief Executive", "Hire Date": "2008-01-15" },
"7734981": { "Name": "Samuel Chamberlain", "Position": "Sales", "Hire Date": "2012-05-01" },
"3400981": { "Name": "Louis Toadvine", "Position": "Customer Support", "Hire Date": "2011-08-24" },
"5517823": { "Name": "Ben Tobin", "Position": "Developer", "Hire Date": "2013-03-19" },
"4587234": { "Name": "David Brown", "Position": "Director of HR", "Hire Date": "2012-01-10" }
};
var employeesArray = Object.keys(employeesById).map(function(v) {
return $.extend({ ID: v }, employeesById[v]);
});
displayData(employeesArray); // initial display of data
function displayData(employees) {
var wrapper = $('#employees').empty();
employees.forEach(function(employee) {
var empDiv = $('<div class="employee"></div>');
wrapper.append(empDiv);
empDiv.append('<span class="name">' + employee.Name + ' ' + '</span>');
empDiv.append('<span class="position">' + employee.Position + ' ' + '</span>');
empDiv.append('<span class="hireDate">' + employee['Hire Date'] + ' ' + '</span>');
empDiv.append('<span class="id">' + employee.ID + ' ' + '</span>');
});
}
$("#sort").on("change", function() {
var field = this.value;
if (field === "ID")
employeesArray.sort(function(a,b) {
return a[field] - b[field];
});
else
employeesArray.sort(function(a,b) {
return a[field].localeCompare(b[field]);
});
displayData(employeesArray);
});.control { padding-bottom: 4px; }
.employees { width: 300px; margin-left: 12px; }
.employee { border: 1px solid black; padding: 4px 4px 4px 4px; margin-bottom: 8px; }
.employee .name { font-size: 14pt; }
.employee .position { display: block; }
.employee .hireDate { display: block; font-size: 10pt; }
.employee .id { color: green; }
请注意，您的选项元素应具有<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="controls">
<div class="control">Search:
<input type="text" name="search" id="search" />
</div>
<div class="control">Sort:
<select name="sort" id="sort">
<option value="Name">Name</option>
<option value="Hire Date">Hire Date</option>
<option value="Position">Position</option>
<option value="ID">ID</option>
</select>
</div>
</div>
<div id="employees"></div>属性，而不是value。
答案 1 :(得分：0)
以下是 Live Searching和Sorting
var employeesById = {
"8110923": {"Name": "John Glanton","Position": "Chief Executive","Hire Date": "2008-01-15"},
"7734981": {"Name": "Samuel Chamberlain","Position": "Sales","Hire Date": "2012-05-01"},
"3400981": {"Name": "Louis Toadvine","Position": "Customer Support","Hire Date": "2011-08-24"},
"5517823": {"Name": "Ben Tobin","Position": "Developer","Hire Date": "2013-03-19"},
"4587234": {"Name": "David Brown","Position": "Director of HR","Hire Date": "2012-01-10"}
};
var EmployeeArray = Object.keys(employeesById).map(function(v) {
return $.extend({ ID: v }, employeesById[v]);
});
display(EmployeeArray); /*Display All EmployeeArray data */
function sorting(EmpData,SearchString='',SortBy='ID'){
switch(SortBy){
case 'ID' :
EmpData.sort(function(a,b) {
return a.ID > b.ID; /*Sort By ID*/
});
break;
case 'Name' :
EmpData.sort(function(a,b) {
return a.Name.localeCompare(b.Name); /*Sort By Name*/
});
break;
case 'Position' :
EmpData.sort(function(a,b) {
return a.Position.localeCompare(b.Position); /*Sort By Position*/
});
break;
case 'Hire Date' :
EmpData.sort(function(a,b) {
return a["Hire Date"].localeCompare(b["Hire Date"]); /*Sort By Hire Date*/
});
break;
default :
/*Silent is golden*/
break;
}
return EmpData;
}
function searching(){
var SearchString = $('#search').val().toUpperCase(); /*Uppercase for Case Insentive*/
var SortBy = $('#sort').val();
var Data = sorting(EmployeeArray,SearchString,SortBy);
var SearchData = [];
var index = 0;
var Name = '';
for(i=0; i<Data.length; i++){
Name = Data[i].Name.toUpperCase(); /*Uppercase for Case Insentive*/
if (Name.indexOf(SearchString)>=0){ /*Search By Name*/
SearchData[index++] = Data[i];
}
}
display(SearchData); /*Display Sorting Data*/
}
function display(Data){
var html = '';
for(var i=0; i<Data.length;i++){
html+='<div class="employee">';
html+='<p class="id">'+Data[i].ID+'</p>';
html+='<p class="name">'+Data[i].Name+'</p>';
html+='<p class="position">'+Data[i].Position+'</p>';
html+='<p class="hireDate">'+Data[i]['Hire Date']+'</p>';
html+='</div>';
};
$('#employees').html(html);
}
$('#search').keyup(function(){ /*Live Search, When Pressing any Keys*/
searching();
});
$('#sort').change(function(){ /*Live Search, When Sort by*/
searching();
});body{
margin: 0px;
padding: 0px;
}
.employee {
width: 96%;
border: 1px solid black;
padding: 5px;
margin: 5px auto;
}
.employee p{
padding: 0px;
margin: 0px;
}
.employee .id {
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="controls">
<div class="control">Search:
<input type="text" placeholder="Search by Name" id="search" />
</div>
<div class="control">Sort:
<select id="sort">
<option value="ID">ID</option>
<option value="Name">Name</option>
<option value="Position">Position</option>
<option value="Hire Date">Hire Date</option>
</select>
</div>
</div>
<div id="employees"></div>
以下是indexOf()，localeCompare()，sort()，toUpperCase()，$.extend()
的功能参考