[英]Get custom attribute value from select
我正在嘗試將 select 選項克隆到另一個 select 中。目前我可以做到,但現在原始選項包含自定義屬性。 所以我的問題是如何訪問自定義屬性? 這就是我現在所擁有的:
var options = $('#sel1 option');
var arrayOptions = [];
for (var i = 0; i < options.length; i++) {
var id = parseInt($(options[i]).val(), 10);
var text = $(options[i]).text() || '[select a type]';
arrayOptions.push('<option value="' + id + ' data-custom="' + options[i]["data-custom"] + '">' + text + '</option>');
}
console.log(arrayOptions);
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>
現在 options[i]["data-custom"] 設置為 undefined 而不是 abc1、abc2 等。
這是一個小提琴。
您可以使用dataset.custom
var options = $('#sel1 option'); var arrayOptions = []; for (var i = 0; i < options.length; i++) { var id = parseInt($(options[i]).val(), 10); var text = $(options[i]).text() || '[select a type]'; arrayOptions.push('<option value="' + id + ' data-custom="' + options[i].dataset.custom + '">' + text + '</option>'); } $('#result').text(arrayOptions.join("\n"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sel1"> <option value="1" data-custom="abc1">Hello 1</option> <option value="2" data-custom="abc2">Hello 2</option> <option value="3" data-custom="abc3">Hello 3</option> </select> <pre id="result"></pre>
這邊走
const arrayOptions = [...document.querySelectorAll('#sel1 option')].map( opt => `<option value="${opt.id}" ` + `data-custom"${opt.dataset.custom}">` + `${opt.textContent}"</option>` ) console.log(arrayOptions);
<select id="sel1"> <option value="1" data-custom="abc1">Hello 1</option> <option value="2" data-custom="abc2">Hello 2</option> <option value="3" data-custom="abc3">Hello 3</option> </select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.