ドロップダウンリストで最後のインデックス値を選択する方法は？

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> 

、私はあなたがdocument.querySelectorAll('select[name="unqiue"] option:last-child')[0]を使用することができ、最後の値を選択し、選択するために、4

Answer 1

が必要になります。

例：

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