我正在嘗試使用 document.get.elementbyId 獲取選項標記的第二個值。<select id="test" class="form-control"> <option value="">-- Select --</option> <option value="1" data-doj="20-06-2011">John</option> <option value="2" data-doj="10-05-2015">Clif</option> <option value="3" data-doj="01-01-2008">Alexander</option></select>通常，我會用來document.getElementById("test").value;獲取一個選項的值。如果像本例一樣有多個值，我該怎么辦？document.getElementById("test").data-doj;？謝謝。
4 回答
BIG陽
TA貢獻1859條經驗 獲得超6個贊
使用HTMLSelectElement.selectedIndex
HTMLSelectElement.selectedIndex 是一個 long 值，反映第一個或最后一個選定元素的索引，具體取決于 multiple 的值。值-1表示沒有選擇任何元素。
要訪問data-*屬性，請使用dataset
注意 -this在事件處理程序中指的是事件被調用的元素。
let select = document.getElementById("test");
select.onchange = function() {
? let selectedI = this.selectedIndex;
? console.log(this.options[selectedI].dataset.doj)
};
<select id="test" class="form-control">
? <option value="">-- Select --</option>
? <option value="1" data-doj="20-06-2011">John</option>
? <option value="2" data-doj="10-05-2015">Clif</option>
? <option value="3" data-doj="01-01-2008">Alexander</option>
</select>
慕沐林林
TA貢獻2016條經驗 獲得超9個贊
像這樣
使用 selectedIndex 進行導航
document.getElementById("test").addEventListener("change",function() {
const opt = this.options[this.selectedIndex];
console.log(opt.value,
opt.getAttribute("data-doj"), // or opt.dataset.doj
opt.text)
})
<select id="test" class="form-control">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>
守著一只汪
TA貢獻1872條經驗 獲得超4個贊
奇怪的是，仍然沒有人提出建議。
有一種方法可以使用 訪問HTMLCollection所選選項HTMLSelecteElement.selectedOptions。<option>如果一次只選擇一個元素，則可以簡單地拉取其第一個元素（使用[0]）。
要訪問data-*屬性，有一個適當的 API，這意味著.dataset['propertyname']某種語法：
document.getElementById('test').addEventListener('change', function(){
? const [selectedOption] = this.selectedOptions,
? ? ? ? dataDoj = selectedOption.dataset.doj
? console.log(dataDoj)? ? ? ??
})
<select id="test" class="form-control">
<option value="">-- Select --</option>
<option value="1"? data-doj="20-06-2011">John</option>
<option value="2"? data-doj="10-05-2015">Clif</option>
<option value="3"? data-doj="01-01-2008">Alexander</option>
</select>
心有法竹
TA貢獻1866條經驗 獲得超5個贊
請參閱下面的工作示例，如何獲取所選選項的值、文本和自定義屬性 -
function trackValue(){
var element = document.getElementById("test");
var option_value = element.options[element.selectedIndex].value;
var option_text = element.options[element.selectedIndex].text;
var option_doj = element.options[element.selectedIndex].getAttribute('data-doj')
console.log('value-', option_value);
console.log('text-', option_text);
console.log('doj-', option_doj);
}
<select id="test" class="form-control" onChange="trackValue();">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>
- 4 回答
- 0 關注
- 281 瀏覽
添加回答
舉報
0/150
提交
取消