如何从下拉列表中创建所选选项的列表

Question

我正在尝试遍历多个 select 下拉列表并将所有 selected 选项添加到逗号分隔列表。

我的下拉代码是：

<select name="testnameID" id="testnameID" multiple>
  <option value="1">Test number 1</option>
  <option value="2">Test number 2</option>
  <option value="3">Test number 3</option>
  <option value="4">Test number 4</option>
  <option value="5">Test number 5</option>
<select>

在我的标签中，我使用了以下内容，但认为可以对其进行简化或改进：

var testnameID = $('#testnameID').val();
var testnameText;            
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
            let option_text = option_element.text;
            let is_option_selected = option_element.selected;

            if (is_option_selected===true){
                testnameText = testnameText + option_text +", ";
                console.log("TestnameText: "+testnameText);
                console.log("\n\r");
            }
            
        });

我需要生成一个变量 testnameText，如果前三项是 selected，那么 return 的值将是“测试编号 1、测试编号 2、测试编号 3”

我搞得一团糟！

Answer 1

您可以尝试使用 Document.querySelectorAll() 来定位所有选定的选项，如下所示：

Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) {
  let option_text = option_element.text;

  var testnameText = option_text +", ";
  console.log("TestnameText: "+testnameText);
  console.log("\n\r");
});

<select name="testnameID" id="testnameID" multiple>
  <option value="1" selected>Test number 1</option>
  <option value="2" selected>Test number 2</option>
  <option value="3" selected>Test number 3</option>
  <option value="4">Test number 4</option>
  <option value="5">Test number 5</option>
<select>

您也可以尝试使用更短的 Array.prototype.map() and Arrow function expressions。

以下示例创建所选选项的数组：

var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked"));
var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text));
console.log(res);

<select name="testnameID" id="testnameID" multiple>
  <option value="1" selected>Test number 1</option>
  <option value="2" selected>Test number 2</option>
  <option value="3" selected>Test number 3</option>
  <option value="4">Test number 4</option>
  <option value="5">Test number 5</option>
<select>

Answer 2

在这种情况下，jquery 的 each() 可以提供帮助。所以获取选定的选项非常简单：

$('#testnameID :selected').each(function (index, el) {
    console.log("TestnameText: " + $(el).text());
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<select name="testnameID" id="testnameID" multiple>
    <option value="1" selected>Test number 1</option>
    <option value="2" selected>Test number 2</option>
    <option value="3" selected>Test number 3</option>
    <option value="4">Test number 4</option>
    <option value="5">Test number 5</option>
</select>

Answer 3

selectedOptions 包含 select 元素的所有 selected 选项。你可以这样使用它：

const select = document.querySelector('select');
select.addEventListener('change', e => {
  // Option texts as an array
  const texts = Array.from(e.target.selectedOptions).map(({text}) => text);
  // Option texts as a comma-separated string
  const textsStr = texts.join(', ');
  console.log(texts);
  console.log(textsStr);
});

<select multiple>
  <option value="1">Test number 1</option>
  <option value="2">Test number 2</option>
  <option value="3">Test number 3</option>
  <option value="4">Test number 4</option>
  <option value="5">Test number 5</option>
</select>

这在事件之外也有效，只需直接引用 select 元素而不是 e.target。

如何从下拉列表中创建所选选项的列表

How do I create a list of the selected options from a dropdwon

javascript

jquery

loops

html-select