0

このリンクに基づいた以下のコードがあります 

<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 になります。

これが（ data-value を使用して）これを行うための最良の方法だと思いましたが、オプション値を使用したくないだけで必須ではありません。

私が試した別のアプローチは、オプションのインデックスを取得することでした。

<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
4

1 に答える 1

1

使用しているので、これを試すことができますjQuery

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

デモ。

于 2012-10-24T04:26:19.357 に答える