我不知道如何正确选择选择值。我的select元素返回文本值,如下所示:
** Please choose
2-3 pers.
16-18 pers.
20-24 pers
3-4 pers.
4-6 pers.
5-7 pers
6-8 pers.
8-10 pers.
10-12 pers.
12-14 pers.
14-16 pers.
16-18 pers.
我了解javascript的排序如下:
""
1
10
11
2
3
4
5
6
7
8
9
但是我想将其从“”排序为11(“”,1,2、3、4、5、6、7、8、9、10、11)。在这里将不胜感激。谢谢。
HTML:
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
<option value="">** Please choose</option>
<option value="7">10-12 pers.</option>
<option value="8">12-14 pers.</option>
<option value="9">14-16 pers.</option>
<option selected="" value="10">16-18 pers.</option>
<option value="1">2-3 pers.</option>
<option value="11">20-24 pers.</option>
<option value="2">3-4 pers.</option>
<option value="3">4-6 pers.</option>
<option value="4">5-7 pers.</option>
<option value="5">6-8 pers.</option>
<option value="6">8-10 pers.</option>
</select>
JavaScript:
$(function() {
var options = $('#dessertservingID option');
options.sort(function(a, b) {
if (a.value > b.value) {
return 1;
}
else if (a.value < b.value) {
return -1;
}
else {
return 0;
}
})
$("#dessertservingID").empty().append(options);
// Vive la France!
$('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));
});
答案 0 :(得分:2)
问题是因为您正在将value
属性作为字符串进行比较。首先使用parseInt()
将它们转换为整数。
还要注意,您可以通过简单地从另一个值中减去一个值来简化sort()
逻辑:
$(function() {
var $options = $('#dessertservingID option');
$options.sort(function(a, b) {
return parseInt(a.value, 10) - parseInt(b.value, 10);
})
$("#dessertservingID").empty().append($options);
$('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
<option value="">** Please choose</option>
<option value="7">10-12 pers.</option>
<option value="8">12-14 pers.</option>
<option value="9">14-16 pers.</option>
<option selected="" value="10">16-18 pers.</option>
<option value="1">2-3 pers.</option>
<option value="11">20-24 pers.</option>
<option value="2">3-4 pers.</option>
<option value="3">4-6 pers.</option>
<option value="4">5-7 pers.</option>
<option value="5">6-8 pers.</option>
<option value="6">8-10 pers.</option>
</select>
答案 1 :(得分:0)
您可以使用parseInt
来获取字符串的数值。它将尝试从字符串的开头获取任何数字值,直到遇到非数字值为止。就您而言,这就是您想要的-您将从20
中获得"20-24"
:
$(function() {
var options = $('#dessertservingID option');
options.sort(function(a, b) {
//parse the values
var valueA = parseInt(a.value);
var valueB = parseInt(b.value);
if (valueA > valueB) {
return 1;
} else if (valueA < valueB) {
return -1;
} else {
return 0;
}
})
$("#dessertservingID").empty().append(options);
$('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
<option value="">** Please choose</option>
<option value="7">10-12 pers.</option>
<option value="8">12-14 pers.</option>
<option value="9">14-16 pers.</option>
<option selected="" value="10">16-18 pers.</option>
<option value="1">2-3 pers.</option>
<option value="11">20-24 pers.</option>
<option value="2">3-4 pers.</option>
<option value="3">4-6 pers.</option>
<option value="4">5-7 pers.</option>
<option value="5">6-8 pers.</option>
<option value="6">8-10 pers.</option>
</select>
答案 2 :(得分:0)
在比较值之前,尝试使用parseInt将option.value解析为整数:
$(function() {
var options = $('#dessertservingID option');
options.sort(function(a, b) {
let aValue = parseInt(a.value);
let bValue = parseInt(b.value);
aValue = isNaN(aValue) ? -1 : aValue;
bValue = isNaN(bValue) ? -1 : bValue;
return aValue - bValue;
})
使用parseInt会强制进行正确的数字比较,而不是比较字符串的键码值。 isNaN检查用于空白值,如果解析的整数为NaN,则将其设置为-1,以确保它是第一个返回的值。
答案 3 :(得分:0)
使用:
<Target Name="AddTsToContent" AfterTargets="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'">
<ItemGroup>
<Content Include="@(TypeScriptCompile)" Condition="'$(Configuration)'=='Debug'"/>
</ItemGroup>
</Target>
相反,对数字进行排序不需要if语句。这会将您的值隐式转换为数字并计算差值。
请参见下面的工作示例:
options.sort(function(a, b) {
return a.value-b.value;
})
$(function() {
var options = $('#dessertservingID option');
options.sort(function(a, b) {
return a.value-b.value;
})
$("#dessertservingID").empty().append(options);
$('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));
});