web-dev-qa-db-ja.com

オプション値を使用して「選択済み」属性を追加します

10個のオプションがある選択ボックスがあります。オプションを選択するたびに、ID「select1」で選択した値がローカルストレージに設定されます。

例：ローカルストレージで取得する最初のオプションを選択した場合：キー：Emailclient-値：Option1。

ここで、Iomは、選択フォームで選択された属性であるlocalstorageの値を作成しようとしています。

これは私が試したものですが、うまくいかないようです：

if (localStorage.getItem("Select1") == "Option1"){ 
    $('#selectbox').val("Option1").attr("selected");
}

私は何を間違っているのですか？

編集：

これは私のコードです：

<select id="selectbox" >
                        <option>Default</option>
                        <option>Option 1</option>
                        <option>Option 3</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                        <option>Option 5</option>
                        <option>Option 6</option>
        </select>

ありがとう

jquerylocal-storagedrop-down-menu
10
jQuerybeast

これは機能します：

var optionValue  = localStorage.getItem("Select1")
$("#selectbox").val(optionValue)
.find("option[value=" + optionValue +"]").attr('selected', true);
27
jQuerybeast

あなたはこのようなものを探しているのではないかと思います。 http://jsfiddle.net/tnPU8/3/

選択ボックスのオプションをループし、それらの値をbの値と比較します。それらが等しい場合、選択ボックスのインデックスが変更され、bの値を含むオプションが表示されます。

var b; //set equal to what you want to compare
$('#selectbox').find('option').each(function(i,e){
    console.log($(e).val());
    if($(e).val() == b){
        $('#selectbox').prop('selectedIndex',i);
    }
});

編集：localStoragehttp://jsfiddle.net/tnPU8/7/ を使用

1
Jack

必要なのはこれだけです。

$("#selectbox").val(localStorage.getItem("selectbox"));

例として以前のフィドルを更新しました： http://jsfiddle.net/uY7ck/1/

編集：最初に投稿したコードでは、同じ選択ボックスでlocalStorageを設定していると仮定すると、「Option1」（スペースなし）と「Option1」（スペース）を比較します。その比較は機能しないため、オプションが選択されることはありません。

0
bstakes

これを試して：

if (localStorage.getItem("Select1") == "Option1"){ 
    $('#selectbox option:contains(Option1)').prop('selected',true); // jquery 1.6+
}

1.6より前のバージョンのjQueryを使用している場合は、.propを.attrに置き換えます。

編集：より動的なバージョン

if (localStorage.getItem("Select1")) {
  $('#selectbox option:contains(' + localStorage.getItem("Select1") + ')').prop('selected',true);
}
0
Kevin B

さらにレビューすると、もっと完全な機能が必要なようです link

search = "Option 5";
$('#selectbox option:contains('+search+')').prop('selected',true);
0
Korvin Szanto