如何在下拉菜單中選擇最後的索引值？

Question

如何通過使用Javascript讀取並選擇下拉列表中的最後一個索引值？

HTML的一個示例。

<select name="unqiue"> 
    <option value="number:1" label="1">1</option> 
    <option value="number:2" label="2" selected="selected">2</option> 
    <option value="number:3" label="3">3</option> 
    <option value="number:4" label="4">4</option> 
</select> 

下拉值可能會有所不同，我需要選擇，選擇最後一個值4

Answer 1

您可以使用document.querySelectorAll('select[name="unqiue"] option:last-child')[0]：

例子：

var lastOpt = document.querySelectorAll('select[name="unqiue"] option:last-child')[0]; 
 

 
// 
 
// To select this element: 
 
// 
 

 
lastOpt.selected = true; 
 

 
// 
 
// To get the value 
 
// 
 

 
var val = lastOpt.value.replace(/\D*/, ''); 
 

 
console.log(val);

<select name="unqiue"> 
 
    <option value="number:1" label="1">1</option> 
 
    <option value="number:2" label="2" selected="selected">2</option> 
 
    <option value="number:3" label="3">3</option> 
 
    <option value="number:4" label="4">4</option> 
 
</select>

Answer 2

你的例子似乎表明， name是您標記中select的唯一值。

您可以使用document.querySelector獲取此項目，然後閱讀或操作它。

const unique = document.querySelector('select[name="unqiue"]'); 
 
const valueLast = unique.lastElementChild.value; 
 
console.log(valueLast); 
 
const textLast = unique.lastElementChild.textContent; 
 
console.log(textLast); 
 
unique.selectedIndex = unique.length - 1;

<select name="unqiue"> 
 
    <option value="number:1" label="1">1</option> 
 
    <option value="number:2" label="2" selected="selected">2</option> 
 
    <option value="number:3" label="3">3</option> 
 
    <option value="number:4" label="4">4</option> 
 
</select>

ParentNode.lastElementChild

Node.textContent

HTMLSelectElement.selectedIndex

HTMLSelectElement