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

【问题标题】：Why removing of spaces fails with multiple select field?为什么使用多个选择字段删除空格会失败？
【发布时间】：2012-07-03 19:37:48
【问题描述】：

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

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

但是如果<select multiple="multiple"字段被传递，它就会失败。

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

【问题讨论】：

$('#'+fieldName) fieldName 是什么？你想做什么？
他正在尝试在选择列表框中的每个可选选项中删除和删除多余的字符。

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

val

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

【讨论】：

【解决方案3】：

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

你可以使用

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

【讨论】：

【解决方案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() );
   }
}

【讨论】：