Question

我尝试了几种方法，只是发现通常的str.length代码没有读取整个表单字段内容

HTML：

<select id="states1" name="states[]" multiple="multiple">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
</option>

无论我选择了多少个状态，JavaScript都只会读取选择的第一个状态。例如，如果我选择了所有3个状态，则只能在下面找到有效的验证检查：

<script> 
var slen = document.forms[0].elements['states1'];
function invoice_() {
if(slen.value == "AL"){
 alert('true');
 return false;
 } }
</script>

并检查长度

<script> 
var slen = document.forms[0].elements['states1'];
function invoice_() {
if(slen.value.length == 2){
 alert('true');
 return false;
 } }
</script>

换句话说，即使表单字段内容的实际长度是6，在我的示例中，我发现检查javascript中字符串长度的唯一方法也只能返回2，因为它只读取第一个选定状态，但是不是其他人

我尝试过

slen.value.options.length

slen.options.length

要获取正确的号码，但是这些方法不起作用。

当它是一个具有多个选择选项的“选择多个选项”字段时，如何获取读取整个表单字段内容的代码以计算长度？

Answer 1

您可以使用.selectedOptions属性来获得多项选择中的所选选项。然后将其转换为数组，并执行.map().reduce()以总计值。

var totalLen = Array.from(document.forms[0].states1.selectedOptions)
  .map(v => v.value.length)
  .reduce((sum, n) => sum + n, 0);

console.log(totalLen);

<form>
  <select id="states1" name="states[]" multiple="multiple">
    <option value="AL" selected>AL</option>
    <option value="AK">AK</option>
    <option value="CA" selected>CA</option>
  </select>
</form>

如果要使用所有选项，而不只是选择所有选项，请使用.options属性。

var totalLen = Array.from(document.forms[0].states1.options)
  .map(v => v.value.length)
  .reduce((sum, n) => sum + n, 0);

console.log(totalLen);

<form>
  <select id="states1" name="states[]" multiple="multiple">
    <option value="AL" selected>AL</option>
    <option value="AK">AK</option>
    <option value="CA" selected>CA</option>
  </select>
</form>

Answer 2

这是可能需要它的人的最佳解决方案：

let uvs = document.forms[0].elements['states1'];
function invoice_() {
 var result = [];
  var options = uvs && uvs.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }


var nst = (result.push(opt.value || opt.text)) - 1;
if(nst > 3){
alert('');
return false;
}

由于某种原因，'result.push（opt.value || opt.text'）的原始计数为+1，因此我只是添加了一些数学运算来使计数准确。字符，但是找到所选状态的数量甚至更好。与5个状态的10个结果相反，我得到5个状态的5个结果。

上面的其他字符计数代码太不稳定。很难说，这可能是浏览器问题。

使用javascript从具有多个值的选择表单字段中查找字符串长度

2 个答案: