为何select的.val()返回文本数组？如何转为浮点数数组？

为什么返回的是字符串数组？ #

HTML里<option>的value属性本身就是字符串类型，jQuery的val()方法只是原封不动地把这些值收集起来返回，不会自动做类型转换，所以得到的是['1','2','4']这种字符串数组，而非预期的数值数组。

怎么把数组转为浮点数/数值数组？ #

直接用parseFloat处理整个数组不行——因为parseFloat只接受单个值，传数组的话它会把数组转成字符串（比如"1,2,4"），然后只解析第一个有效数字，所以只会返回1。正确做法是遍历数组每个元素逐个转换：

方法1：用数组map配合Number/parseFloat #

var selectedValues = $('#multiselect').val().map(Number);
// 或者用parseFloat
var selectedValues = $('#multiselect').val().map(item => parseFloat(item));

map会遍历数组的每个元素，用Number()或者parseFloat()把字符串转成数值，最后返回新的数值数组。

方法2：直接遍历选中的option元素提取数值 #

如果不想先获取字符串数组再转换，也可以直接遍历选中的选项，一步到位拿到数值数组：

var selectedValues = $('#multiselect option:selected').map(function() {
  return Number($(this).val());
}).get();

这里map()返回的是jQuery对象，用get()可以把它转成普通的数值数组。

完整代码示例 #

<select id="multiselect" multiple="multiple"> 
  <option value="1" class="selected">Text 1</option>
  <option value="2" class="selected">Text 2</option>
  <option value="3">Text 3</option>
  <option value="4" class="selected">Text 4</option>
</select>

<script>
// 方法1：转换已有字符串数组
var selectedStrArr = $('#multiselect').val();
var selectedNumArr = selectedStrArr.map(Number);
console.log(selectedNumArr); // [1,2,4]

// 方法2：直接获取数值数组
var selectedNumArr2 = $('#multiselect option:selected').map(function() {
  return parseFloat($(this).val());
}).get();
console.log(selectedNumArr2); // [1,2,4]
</script>

内容的提问来源于stack exchange，提问作者Markus