jQuery Selectメニューの置換
-
10-07-2019 - |
質問
ユーザーが現在いるページのテーマを選択する選択ドロップダウンがあります:
<select id="style" name="acct-stylenum">
<option value="1" selected="true">Light</option>
<option value="2">Dark</option>
</select>
次に、この選択メニューを制御する2つのdivを追加します。むしろ、選択メニューよりもユーザーに2つの画像の間で選択してもらいたいです。 divは次のとおりです。
<div class="style-box light"></div>
<div class="style-box dark"></div>
jQueryを使用して選択メニューを非表示にしますが、その入力は引き続き使用します。また、divでメニューの値を制御し、選択された状態を表示したいと思います。 jQueryまたはJavaScriptを使用してこれを行う最も簡単な方法を教えてください。
事前に感謝します。
-B
解決
選択のオプションと同じ順序ですべての画像がある場合、次のようにすることができます(jQueryバージョン<!> gt; = 1.3および<!> lt; 1.4を想定しています。 )
$("div.style-box").live('click', function() {
//get index of div clicked
var index = $(this).prevAll().length;
//select the corresponding option in the hidden select
$('#style>option').eq(index).attr('selected', true);
});
他のヒント
このプラグインの使用: http://dev.jquery.com/browser/trunk / plugins / selectboxes これを行うことができます:
$("#style-box-light").click(function() {
$("#style").selectOptions("1");
});
所属していません StackOverflow