按值属性使用jQuery排序选择选项 [英] Sort Select Options by Value Attribute Using jQuery
问题描述
var selectList = $('#featuredSelectField option');
var newList = [];
var theNewNew = [];
for(var i = 0; i< selectList.length; i ++){
newList [i] =(selectList [i] .value);
}
newList.sort();
for(var i = 0; i theNewNew [i] = $('#featuredSelectField option [value =''+ newList [i] +']'' );
selectList [i] = theNewNew [i];
}
这里是html:
< select id =featuredSelectFieldname =addid7617843size =1>
< option value =data-value =>选择一个选项< / option>
< option value =10493640data-value =10493640data-qty =30data-mxqty =30>大小5.5 - $ 111.99< / option>
< option value =10493639data-value =10493639data-qty =120data-mxqty =50>大小5 - $ 111.99< / option>
< option style =display:none; disabled =disabledvalue =10792504data-value =10792504data-qty =0data-mxqty =0>大小10 - $ 111.99售罄< / option>
< option value =10493644data-value =10493644data-qty =138data-mxqty =50>大小7 - $ 111.99< / option>
< option value =10493642data-value =10493642data-qty =22data-mxqty =22>大小6.5 - $ 111.99< / option>
< option value =10493641data-value =10493641data-qty =57data-mxqty =50>大小6 - $ 111.99< / option>
< option value =10493648data-value =10493648data-qty =99data-mxqty =50>大小9 - $ 111.99< / option>
< option value =10493647data-value =10493647data-qty =28data-mxqty =28>大小8.5 - $ 111.99< / option>
< option value =10493646data-value =10493646data-qty =74data-mxqty =50>大小8 - $ 111.99< / option>
< option value =11288830data-value =11288830data-qty =1data-mxqty =1>大小4.5 - $ 111.99< / option>
< option value =10493645data-value =10493645data-qty =51data-mxqty =50>大小7.5 - $ 111.99< / option>
< option value =10792503data-value =10792503data-qty =5data-mxqty =5>大小9.5 - $ 111.99< / option>
< option value =11288831data-value =11288831data-qty =6data-mxqty =6>大小4 - $ 111.99< / option>
< / select>
var selectList = $('#featuredSelectField选项');
$ b $ selectList.sort(function(a,b){
a = a.value;
b = b.value;
return ab;
});
$('#featuredSelectField')。html(selectList);
在这里,您可以找到演示并将结果与原始结果进行比较:
http://jsfiddle.net/74c2M/3/
在这里你可以找到正确的代码:
http://jsfiddle.net/74c2M/4/
祝你好运!
Well, the title says it all. What I am doing is creating a featured product module. The drop down list of sizes is populated using JSON and I am using handlebars to render the html. I do not have control over the JSON file. I tried sorting the option values by the actual text within the option tags, but I realized that the option values were wrong after that. So now I am trying to sort the options by their value attributes, but haven't figured it out yet. I am trying to do something like this:
var selectList = $('#featuredSelectField option');
var newList = [];
var theNewNew = [];
for(var i=0; i<selectList.length; i++){
newList[i]=(selectList[i].value);
}
newList.sort();
for(var i=0; i<newList.length; i++){
theNewNew[i] = $('#featuredSelectField option[value="'+newList[i]+'"]');
selectList[i] = theNewNew[i];
}
and here is the html:
<select id="featuredSelectField" name="addid7617843" size="1">
<option value="" data-value="">Select an option</option>
<option value="10493640" data-value="10493640" data-qty="30" data-mxqty="30">Size 5.5 - $111.99</option>
<option value="10493639" data-value="10493639" data-qty="120" data-mxqty="50">Size 5 - $111.99</option>
<option style="display: none;" disabled="disabled" value="10792504" data-value="10792504" data-qty="0" data-mxqty="0">Size 10 - $111.99 Sold Out</option>
<option value="10493644" data-value="10493644" data-qty="138" data-mxqty="50">Size 7 - $111.99</option>
<option value="10493642" data-value="10493642" data-qty="22" data-mxqty="22">Size 6.5 - $111.99</option>
<option value="10493641" data-value="10493641" data-qty="57" data-mxqty="50">Size 6 - $111.99</option>
<option value="10493648" data-value="10493648" data-qty="99" data-mxqty="50">Size 9 - $111.99</option>
<option value="10493647" data-value="10493647" data-qty="28" data-mxqty="28">Size 8.5 - $111.99</option>
<option value="10493646" data-value="10493646" data-qty="74" data-mxqty="50">Size 8 - $111.99</option>
<option value="11288830" data-value="11288830" data-qty="1" data-mxqty="1">Size 4.5 - $111.99</option>
<option value="10493645" data-value="10493645" data-qty="51" data-mxqty="50">Size 7.5 - $111.99</option>
<option value="10792503" data-value="10792503" data-qty="5" data-mxqty="5">Size 9.5 - $111.99</option>
<option value="11288831" data-value="11288831" data-qty="6" data-mxqty="6">Size 4 - $111.99</option>
</select>
var selectList = $('#featuredSelectField option');
selectList.sort(function(a,b){
a = a.value;
b = b.value;
return a-b;
});
$('#featuredSelectField').html(selectList);
Here you cand find a demo and compare the results with the original: http://jsfiddle.net/74c2M/3/
Here you can find the proper code: http://jsfiddle.net/74c2M/4/
Good luck !
这篇关于按值属性使用jQuery排序选择选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!