如何在javascript中获取多选中最后选择的选项[duplicate]

jgovgodb  于 2023-02-11  发布在  Java
关注(0)|答案(3)|浏览(192)
    • 此问题在此处已有答案**:

How to get all selected values of a multiple select box?(28个答案)
昨天关门了。
我想在javascript而不是jquery中的<select multiple>中获得最后选择的<option>!
最后选择的选项是指用户选择的最后一个选项,而不是select元素中的最后一个option元素!
我试着:

<select multiple="multiple" onchange="changeEvent(this)">

function changeEvent(selectTag) {
    console.log(selectTag.value);
}

我希望得到最后一个选定的<option>

nszi6y05

nszi6y051#

如果未设置multiple属性,则select标记的value属性仅返回所选选项的值。如果设置了multiple属性,则可以使用<select>元素的options属性获取所有选项的数组,并检查选择了哪些选项。
下面是使用
JavaScript**的函数的更新版本:

function changeEvent(selectTag) {
    let selectedOptions = [];
    for (let i = 0; i < selectTag.options.length; i++) {
        if (selectTag.options[i].selected) {
            selectedOptions.push(selectTag.options[i].value);
        }
    }
    console.log(selectedOptions);
}
<select multiple="multiple" onchange="changeEvent(this)">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
</select>
k2arahey

k2arahey2#

在代码中,selectTag.value 返回 select 元素中当前选定选项的值。如果 multiple 属性设置为 multiple,则可以同时选择多个选项。
要获取最后选择的选项,您需要跟踪所有选择的选项并将它们存储在一个数组中。然后,您可以访问此数组的最后一个元素以获取最后选择的选项。下面是一个示例:

<select multiple="multiple" onchange="changeEvent(this)">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<script>
let selectedOptions = [];

function changeEvent(selectTag) {
  selectedOptions = [];
  for (let i = 0; i < selectTag.options.length; i++) {
    if (selectTag.options[i].selected) {
      selectedOptions.push(selectTag.options[i].value);
    }
  }
  console.log(selectedOptions[selectedOptions.length - 1]);
}
</script>
oipij1gg

oipij1gg3#

要获取所有选定的选项,请在selectTag上使用selectedOptions
对于“last”选项,使用默认值selectTag.value
请记住,.value将仅包含最后选择的值,因此如果您取消选择某个值,则之前选择的值将设置为selectTag.value的值

function changeEvent(selectTag) {
    const allSelectedValues = Array.from(selectTag.selectedOptions).map(t => t.value).join(', ');
    console.log(`All selected: ${allSelectedValues}`);
    console.log(`Previous: ${selectTag.value}`);
}
<select multiple="multiple" onchange="changeEvent(this)">
  <option>foo</option>
  <option>bar</option>
  <option>foobar</option>
</select>

相关问题