javascript - 为什么使用多个选择字段删除空格会失败？

Question

我有通用代码来删除字段值开头和结尾的空格：

var fieldValue = $('#'+fieldName).val().replace(/\s+$/g, '');

但是如果<select multiple="multiple"字段通过，它会失败。

我可以有通用代码来绕过这些字段吗？

Answer 1

给定一个选择倍数，该val()方法将返回一个数组（除非没有选择任何项目，在这种情况下它将返回null），而不是一个字符串。

如果要从值中去除空格，则必须遍历数组（可能使用each或 jQuery's map）并依次将正则表达式应用于每个值。

Answer 2

值

在元素的情况下，该.val()方法返回一个包含每个选定选项的数组；如果未选择任何选项，则返回 null。

Answer 3

$('#'+fieldName).val()返回<select multiple>数组

你可以使用

var value = $.map( $('#'+fieldName).val(), function (opt) {
  return $.trim(opt);
} );

Answer 4

如果要更改所有选项的值和内部文本，无论它们是否被选中：

<select id="mySelect" multiple="multiple">
    <option name="1" value="Test 1 ">Test 1  </option>
    <option name="2" value=" Test 2">  Test 2</option>
    <option name="3" value=" Test 3 ">  Test 3  </option>
</select>


<script type="text/javascript">

    // Iterate through the individual option elements
    $("#mySelect option").each(function () {

        // "this" points to the option element encountered during the current iteration of .each()

        // Trim each text node (in between the <option> and </option> tags)
        // Using native JS String Object .trim()
        $(this).text( $(this).text().trim() );

        // Trim each value attribute
        $(this).val( $(this).val().trim()) });

    });

</script>

脚本运行后，您将获得以下 HTML，确保在表单提交/Ajax 请求之前根据需要修剪所有数据（无论是否选中）：

<select id="mySelect" multiple="multiple">
    <option name="1" value="Test 1">Test 1</option>
    <option name="2" value="Test 2">Test 2</option>
    <option name="3" value="Test 3">Test 3</option>
</select>

为了使这个通用，您可以添加一个检查以查看该元素是否是一个选择元素（然后执行上面的 .each() 方法）或默认为修剪单个元素的文本或值字段的更简单的方法。

function trimInputs(fieldId) {
    var el = $('#' + fieldId);

    if (el.prop('tagName') === 'SELECT') {
        $('#' + fieldId + ' option').each(function () {        
            $(this).val( $(this).val().trim()) });
            $(this).text( $(this).text().trim() );
        });
    } else {
        el.val( el.val().trim() );
        el.text( el.text().trim() );
   }
}