Question

我一直在尝试使用getElementById点击“添加”将多个选择下拉列表中的数组值推送到文本框

<!DOCTYPE html>
<html>
<body>
 TextName: <input type="text" id="txtName" readonly="readonly" />
 Name:<select multiple="" name="ddlNames[]" id="ddlNames">
<option value="Mudassar Khan">Mudassar Khan</option>
<option value="John Hammond">John Hammond</option>
<option value="Mike Stanley">Mike Stanley</option>
</select>
<button onclick="SetName()">Add</button>

<script>
function SetName() {
        var txtName = document.getElementById("txtName");
    txtName.value = document.getElementById("ddlNames[]").value;
}
</script>
</body>
</html>

上面的代码只输出文本框中的第一个选定选项，但不输出所有选中的选项。对我做错了什么建议？或者我可以改变什么？

Answer 1

ID为ddlNames而不是ddlNames[]。改为以下内容;

function SetName() {
      var txtName = document.getElementById("txtName");
      txtName.value = document.getElementById("ddlNames").value;
}

Answer 2

解决方案1 

要获取所有选定的选项，您可以遍历所有选项，然后只能过滤选定的选项。看看下面的片段。

 Array.prototype.filter.call( document.getElementById("ddlNames").options, el => el.selected).map(el => el.value).join(",")

＆＃13;

<!DOCTYPE html>
<html>

<body>
  TextName:
  <input type="text" id="txtName" readonly="readonly" /> Name:
  <select multiple="" name="ddlNames[]" id="ddlNames">
    <option value="Mudassar Khan">Mudassar Khan</option>
    <option value="John Hammond">John Hammond</option>
    <option value="Mike Stanley">Mike Stanley</option>
  </select>
  <button onclick="SetName()">Add</button>

  <script>
    function SetName() {
      var txtName = document.getElementById("txtName");
      txtName.value = Array.prototype.filter.call( document.getElementById("ddlNames").options, el => el.selected).map(el => el.value).join(",");
    }
  </script>
</body>

</html>

＆＃13;

解决方案2

您可以使用querySelectorAll仅获取所选选项

＆＃13;

<!DOCTYPE html>
<html>

<body>
  TextName:
  <input type="text" id="txtName" readonly="readonly" /> Name:
  <select multiple="" name="ddlNames[]" id="ddlNames">
    <option value="Mudassar Khan">Mudassar Khan</option>
    <option value="John Hammond">John Hammond</option>
    <option value="Mike Stanley">Mike Stanley</option>
  </select>
  <button onclick="SetName()">Add</button>

  <script>
    function SetName() {
      var txtName = document.getElementById("txtName");
      var selected = document.querySelectorAll("#ddlNames option:checked");
      txtName.value = Array.prototype.map.call(selected, el => el.value).join(',');
    }
  </script>
</body>

</html>

＆＃13;

Answer 3

只需添加+
txtName.value += document.getElementById("ddlNames").value;

function SetName() {
    var txtName = document.getElementById("txtName");
    txtName.value += document.getElementById("ddlNames").value;
}

<!DOCTYPE html>
<html>
<body>
 TextName: <input type="text" id="txtName" readonly="readonly" />
 Name:<select multiple="" name="ddlNames" id="ddlNames">
<option value="Mudassar Khan">Mudassar Khan</option>
<option value="John Hammond">John Hammond</option>
<option value="Mike Stanley">Mike Stanley</option>
</select>
<button onclick="SetName()">Add</button>

</body>
</html>

Answer 4

您可以使用querySelectorAll来查询所有选中的选项DOM，然后通过for-loop获取每个元素的值。

例如：

function SetName() {
        var txtName = document.getElementById("txtName");
        var selected = document.querySelectorAll("#ddlNames option:checked");
        var values = [];
        for(var i=0; i<selected.length; i++){
                    values.push(selected[i].value);
                }
    txtName.value = values.join(',');
}

使用getElementById将选择下拉列表中的多个值发送到文本框

4 个答案: