如何 return optgroup 中的选项文本？

Question

好的，这就是代码

<select name="book" id="book">
                <optgroup label="Camus">
                <option>The Outsider</option>
                <option>The Rebel</option>
                <option>The Plague</option>
            </optgroup>
            <optgroup label="Orwell">
                <option>Animal Farm</option>
                <option>Nineteen Eighty-Four</option>
                <option>Down and Out in Paris and London</option>
            </optgroup>
</select>

我想要一个 var 来获取第一个 optgroup 的第二个选项的文本（在本例中是 "The Rebel"）可以说我有 var x = document.getElementById("book")...... 我需要在 var 的其余部分上添加什么以获得我想要的值？（仅Javascript）

Answer 1

如果您想访问 "The Rebel"，只需使用 options 属性:

引用现有 <select> 元素中的第二个选项

// Reference the second option in your element to retrieve "The Rebel"
var theRebel = document.getElementById("book").options[1].value;

options 将忽略任何 optgroups 并简单地 return 所有可用的内部 option 元素。如果你想实际使用可用的 optgroups，你可以考虑使用 document.querySelector() 函数，它允许更多的查询灵活性：

// Get the first <option> from the first <optgroup> (i.e. "The Outsider")
document.querySelector('#book optgroup:nth-child(1) option:nth-child(1)').value
// Get the first <option> from the second <optgroup> (i.e. "Animal Farm")
document.querySelector('#book optgroup:nth-child(2) option:nth-child(1)').value

例子

var x = document.getElementById("book");
alert(x.options[1].value);

<select name="book" id="book">
  <optgroup label="Camus">
    <option>The Outsider</option>
    <option>The Rebel</option>
    <option>The Plague</option>
  </optgroup>
  <optgroup label="Orwell">
    <option>Animal Farm</option>
    <option>Nineteen Eighty-Four</option>
    <option>Down and Out in Paris and London</option>
  </optgroup>
</select>

如何 return optgroup 中的选项文本？

how to return the text of a option inside a optgroup?

html

javascript

select

label

optgroup