使用JavaScript获取多个选择值并以特定格式显示结果

Question

我有一个选择多个下拉列表，用户可以选择多个值。我正在尝试创建一个抓取这些值的脚本，然后以下列格式显示输出：

Test1, Test2, Test3 and Test4

但是，如果仅选择两个值以使其具有此格式

Test1 and Test2

如果它只是一个值：

Test1

我已经接近我希望它看起来如何，但我只能在第一个或最后一个不是所有实例之间获得一个空格。

以下是我对HTML的看法：

<select multiple id="FixAgent" onChange="myFixAgentList1();myFixAgentList2();myFixAgentList3();">
  <option value="Test1">Test1</option>
  <option value="Test2">Test2</option>
  <option value="Test3">Test3</option>
  <option value="Test4">Test4</option>
</select>

<textarea id="FixAgentListArray1" rows="1" cols="50" style="visibility: hidden;"></textarea>
<textarea id="FixAgentListArray2" rows="1" cols="50" style="visibility: hidden;"></textarea>
<textarea id="FixAgentListArray3" rows="1" cols="50"></textarea>

最后一个textarea没有被隐藏，因为其他两个仅用于存储用于下一个函数的不同变量。

这是我的脚本：

function getFixedAgentValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i = 0, iLen = options.length; i < iLen; i++) {
    opt = options[i];
    if (opt.selected) {
      return result.push(opt.value || opt.text);
    }
  }
  return result;
}

function myFixAgentList1() {
  var a = document.getElementById("FixAgent");
  document.getElementById("FixAgentListArray1").innerHTML = getFixedAgentValues(a);

  function myFixAgentList2() {
    var a = document.getElementById("FixAgentListArray1").value;

    if (a.includes(",")) {
      var b = a.lastIndexOf(",");
      var c = a.substring(0, b) + " and " + a.substring(b + 1);
      document.getElementById("FixAgentListArray2").innerHTML = c;
    } 
    else {
      document.getElementById("FixAgentListArray2").innerHTML = a;
    }
  }

  function myFixAgentList3() {
    var a = document.getElementById("FixAgentListArray2").value;

    if (a.includes(",")) {
      var b = a.lastIndexOf(",");
      var c = a.substring(0, b) + " , " + a.substring(b + 1);
      document.getElementById("FixAgentListArray3").innerHTML = c;
    } 
    else {
      document.getElementById("FixAgentListArray3").innerHTML = a;
    }
  }

我不知道是谁将它替换为“，”的所有值，用“，”选择三个或更多值，用“和”分隔最后两个或如果只选择两个值。

如果有一种方法可以在没有这么多隐藏字段的情况下执行此操作，只需在短脚本中使用JavaScript一次性拉出并显示值即可。

Answer 1

一个简单的switch（）块对你有好处。根据所选选项的数量，您可以构建准备显示的字符串。

function getFixedAgentValues(select) {
  var retString = "";
  var result = [];
  var options = select && select.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);
    }
  }
  switch (result.length) {
    case 1:
      retString = result[0];
      break;
    case 2:
      retString = result[0] + " and " +
        result[1];
      break;
    case 3:
      retString = result[0] + ", " +
        result[1] + " and " + result[2];
      break;
    case 4:
      retString = result[0] + ", " +
        result[1] + ", " + result[2] + " and " + result[3];
      break;
  }
  return retString;
}


function myFixAgentList1() {
  var a = document.getElementById("FixAgent");
document.getElementById("FixAgentListArray1").innerHTML=getFixedAgentValues(a);
}

和略微修改的HTML

<select multiple id="FixAgent" onChange="myFixAgentList1();">