使用js存储来自select选项的数据值

Question

我有以下基于此链接的代码

<select name="myselect" class="myselectClass" id="myselectID">
    <option data-value='{"comporder":"0"}' value="myval0">test 0</option>
    <option data-value='{"comporder":"1"}' value="myval1">test 1</option>
    <option data-value='{"comporder":"2"}' value="myval2">test 2</option>
</select>
<br>
<input type="text" id="myinput" name="webStorageInput" />
<input type="submit" id="mysave" value="Save" />

<script type="text/javascript">   
var storedText = localStorage.getItem('webStorageTestInput');
var inputBox = document.getElementById("myinput");
var saveBtn = document.getElementById("mysave");
alert(storedText);

saveBtn.onclick = function(){
var valueToSave =inputBox.value.replace(/<\/?[^>]+>/gi, '');

localStorage.setItem('webStorageTestInput',valueToSave);
};
</script>

见我的小提琴

我可以存储通过输入字段输入到本地存储中的值，但是我希望存储的值使用用户在我的选择中的最后一个选项，例如，如果他们选择测试1，则其值为1。

我认为这是执行此操作的最佳方法（使用数据值），但这不是必需的，我只是不希望它使用options值。

我尝试的另一种方法是仅获取选项的索引。

<select name="mySelect" class="myselectClass" id="mySelect">
    <option value="myval0">test 0</option>
    <option value="myval1">test 1</option>
    <option value="myval2">test 2</option>
</select>
<br>
<input type="submit" id="mysave" value="Save" />


<script>
var x = document.getElementById("mySelect").selectedIndex;
var y = document.getElementById("mySelect").options;
var saveBtn = document.getElementById("mysave");


saveBtn.onclick = function(){
    alert("Index: " + y[x].index + " is " + y[x].text);
 };
</script>

但是，如果我这样做，无论我单击什么，都将每次收到以下警报。

Index: 0 is test 0

Answer 1

您可以尝试一下，因为您使用的是jQuery

$("#mysave").on('click', function(){
    var i = $("#mySelect").prop("selectedIndex");
    var t = $("#mySelect option:selected").text();
    alert("Index: " + i + " is " + t);
});

演示