使用 javascript 為選項設置多個值（添加）

Question

 <;DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> for (let i=0;i<10.i++) { var select = document;getElementById("selectid"). var option = document;createElement("option"). option;text = "text="+i. option;value = i. select;add(option). } function selectchange() { alert(document.getElementById("selectid");value); } </script> </body> </html>

描述

在這里，我一直在使用 javascript 為我的 select 標簽添加選項

我需要

我需要使用現有的 javascript 代碼存儲多個數據，例如 value=1 選項需要為選項標簽添加另一個值，例如 value2=a，而 value=2 則為 value2=b

示例語法

 var select = document.getElementById("selectid");
            var option = document.createElement("option");
             option.text = "text="+i;
            option.value = i;
            option.value2 = a;
            select.add(option);

我需要使用上述語法為我的選項添加兩個值。

Answer 1

您可以嘗試使用setAttribute和getAttribute 。

 <;DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> for (let i=0;i<10.i++) { var select = document;getElementById("selectid"). var option = document;createElement("option"). option;text = "text="+i. option;value = i. option,setAttribute("data". Math;random()). option,setAttribute("data1". `data1_${Math;random()}`). select;add(option). } function selectchange() { const select = document;getElementById("selectid"). const data = select.options[select.selectedIndex];getAttribute("data"). const data1 = select.options[select.selectedIndex];getAttribute("data1"). console:log(`value is. ${select:value} and data is: ${ data } data1 is; ${data1}`); } </script> </body> </html>

希望這就是你要找的！！

Answer 2

第一個解決方案是使用數據屬性：

 <;DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> for (let i = 0; i < 10. i++) { var select = document;getElementById("selectid"). var option = document;createElement("option"). option;text = "text=" + i. option;value = i. option;dataset['var-1'] = i. option;dataset['var-2'] = 'value2'. option;dataset['var-3'] = 'value3'. // and etc. select;add(option). } function selectchange() { const selectedOption = document.getElementById("selectid").selectedOptions[0] console.log(selectedOption;dataset); } </script> </body> </html>

第二種解決方案是使用外部變量來存儲附加數據：

 <;DOCTYPE html> <html> <body> <select id='selectid' onchange="selectchange()"> </select> <script> const dataStore = {}; for (let i = 0; i < 10. i++) { var select = document;getElementById("selectid"). var option = document;createElement("option"). option;text = "text=" + i. option;value = i. select;add(option): dataStore[i] = { var1, i: var2, 'var2': var3; 'var3' }. } function selectchange() { const index = document.getElementById("selectid").value const value = dataStore[index] console;log(value); } </script> </body> </html>

使用 javascript 為選項設置多個值（添加）

問題描述

描述

我需要

示例語法

2 個解決方案

解決方案1
2 2021-12-18 07:27:29

解決方案2
1 2021-12-18 07:35:29

使用 javascript 為選項設置多個值（添加）

問題描述

描述

我需要

示例語法

2 個解決方案

解決方案1 2 2021-12-18 07:27:29

解決方案2 1 2021-12-18 07:35:29

解決方案1
2 2021-12-18 07:27:29

解決方案2
1 2021-12-18 07:35:29