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

【问题标题】：Find string length from select form field with multiple values with javascript使用javascript从具有多个值的选择表单字段中查找字符串长度
【发布时间】：2019-03-15 21:13:04
【问题描述】：

我尝试了几种方法，结果发现通常的 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

要获得正确的数字，但那些方法不起作用。

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

【问题讨论】：

该规范有时会很有用 w3.org/TR/html50/forms.html#dom-select-selectedoptions

标签： javascript

【解决方案1】：

您可以使用.selectedOptions 属性来获取多选中的选定选项。然后将其转换为 Array，并执行 .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>

【讨论】：

如果我使用states1.options，代码给我的长度是100，这是正确的。但是，当我使用states1.selectedOptions时，无论选择了多少个状态，代码的长度都会返回0
在做出任何选择之前它可能正在运行？
代码行为怪异。如果我尝试新鲜，我会得到 0，但如果我刷新 2x 并选择另一个状态，我会得到正确的 #。因此，该代码本质上是不稳定的。我需要别的东西。
@cdr1：此代码仅读取值列表。没有什么不稳定的。它很可能与您的事件处理程序或其他东西有关。
实际上我读到“selectedOptions”不适用于某些浏览器。它在 IE 上根本不起作用，而且显然在 FF 中执行不规律。我发现这很困难:) 一旦我将代码更改为我在下面发布的内容，一切都很顺利。

【解决方案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 个结果。

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

【讨论】：