如何在选择元素选项中存储和检索对象作为值？

Question

如何存储&检索对象作为select元素的选项的值？

<select>
<option value = "{}" selected>lorem</option>
</select>

Answer 1

这不是一个很好的模式。您应该让select使用某个UUID(或对象中唯一的ID字段(作为选择的值，并使用name或description向用户显示。

然后在表单提交时，您可以使用Array.find()来获取所选的对象。

Answer 2

同意KiaiFighter的意见。创建一个对象数组。并从中填充/创建选项。然后使用filter函数检索所选对象。运行下面的示例代码段

const myarray = [
{value: 'one', text: 'one', otherstuff: 'A'},
{value: 'two', text: 'two', otherstuff: 'B'},
{value: 'three', text: 'three', otherstuff: 'C'},
{value: 'four', text: 'four', otherstuff: 'D'},
]
const options = myarray.map(x => `<option value="${x.value}">${x.text}</option>`);
$('#myselect').append(options);
// find elements
$('#mybutton').click(()=> console.log(myarray.filter(x => x.value == $('#myselect').val())[0]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id = "myselect">
</select>
<button id="mybutton">
submit
</button>

Answer 3

将对象存储在选项值中：

var objVar = btoa(unescape(encodeURIComponent(JSON.stringify({}))));
$('#optionId').append(`<option value = "`+objVar+`">OPTION DATA</option>`);

从所选选项值检索对象：

var retrieveData = JSON.parse(atob($('#optionId').val()))