2

オプションタグの値をローカルストレージに保存しようとしています。その値をローカルストレージに保存した後、ユーザーが選択したオプションにオプションタグを設定できるようにしたいと思います。以下を試しましたが、保存できるのは値だけです。selectタグをユーザーが選択した値に変更するのに問題があります。

<select name="fruit" id="fruit">
    <option value="1">Apple</option>
    <option value="2">Guava</option>
    <option value="3">Mango</option>
    <option value="4">Grapes</option>
</select>

document.getElementById("fruit").onchange = function() {
 localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit') === "Guava") {
 document.getElementById("fruit").setAttribute('Selected', 'Guava');
}
4

3 に答える 3

3

これは、選択したオプションの値とテキストが異なるためです。試す：

 <select name="fruit" id="fruit">
    <option value="Apple">Apple</option>
    <option value="Guava">Guava</option>
    <option value="Mango">Mango</option>
    <option value="Grapes">Grapes</option>
</select>

    document.getElementById("fruit").onchange = function() {
     localStorage['fruit'] = document.getElementById("fruit").value;
    }
    window.onload= function(){
        if(localStorage['fruit'])
            document.getElementById("fruit").value = localStorage['fruit'];
    }
于 2012-12-14T06:46:36.143 に答える
1

オプション値は整数であるため、この場合、オプション要素のテキストの内容ではなく、オプションの値に対してチェックします。

ゼロから始まる増分数値オプション値がある場合に機能するソリューションを次に示します。

デモ

HTML:

<select name="fruit" id="fruit">
    <option value="0">Apple</option>
    <option value="1">Guava</option>
    <option value="2">Mango</option>
    <option value="3">Grapes</option>
</select>

そしてあなたのJSは次のようになります：

document.getElementById("fruit").onchange = function() {
    localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit')) {
    document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true;
}​
于 2012-12-14T06:43:05.830 に答える
0

選択の値をローカルストレージに保存しているように見えますが、オプションテキストを使用して比較しようとしています。アプリケーションの動作を誤解している可能性があります。

とにかく、このスニペットは適切に選択された値を取得する必要があります (Guava フルーツの場合): 

$("#fruit option[value='2']").attr("selected","selected");

オプションのテキストでオプションタグを設定する必要がある場合 (Guava):

$("#fruit option").each(function(){
  if ($(this).text() == "Guava")
    $(this).attr("selected","selected");
});
于 2012-12-14T06:43:50.300 に答える