5

<select>以下の例のようなメニューがあります。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

一部の Web サイトでは、このメニューが外部の画像または div を介してトリガーできることがわかりました。

Google で検索しましたが、ほとんどすべての質問と回答は、select 内の画像を一覧表示する方法に関連しています。これは必要なものではありません。DIV または画像をクリックしたときに選択メニューが表示されるようにします。

別の DOM 要素、つまり div をクリックしてこの選択メニューをトリガーするにはどうすればよいですか?

PS。私のウェブサイトにはすでに jQuery が含まれています。

4

4 に答える 4

2

ここでは、JSFiddle でスクリプトをコーディングして、外部 div を使用してドロップダウンからさまざまなオプションを簡単に選択できるようにしました。

HTML:

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<nav>
    <div data-value="volvo">volvo</div>
    <div data-value="saab">saab</div>
    <div data-value="mercedes">mercedes</div>
    <div data-value="audi">audi</div>
</nav>

CSS:

select {
    display:block;
    margin:0 0 10px;
}
div {
    padding:5px 10px;
    margin:0 0 5px;
    border:solid 1px #ccc;
    background:#eee;
    cursor:pointer;
}

JS:

$(document).ready(function(){
    var select = $("select"),
        value = "";

    $("div").on("click",function(){
        value = $(this).attr("data-value"); // Store the value of the clicked div        
        select.find('option[value="'+ value +'"]') // Match the option with the value we get before
            .prop("selected",true) // Assign it selected attr
            .end() // Go back to the select
                .trigger("change"); // Trigger the change to see the change reflected on the select
    });
});

このスクリプトに基づいて、たとえば、各オプション (例: data-link="http://google.com") に URL を追加し、window.location を変更するか、必要なものを追加することで、多くの機能を増やすことができます。 .

とにかく、本当に素晴らしいプラグインを自動的に作成したい場合は、msDropdown を提案します (ドキュメントはこちら)。

このプラグインを使用すると、選択タグまたは json 情報を使用して単純にバインドすることで、画像、説明、およびその他の多くの機能を使用してカスタム選択を作成できます。希望はあなたが探していたものです。

于 2014-04-14T20:59:02.790 に答える
0

「選択メニューを表示したい」と言うときは、ユーザーが特定のdivをクリックしたときに、ドロップダウン/選択リストで特定の値を選択したいとします。

最初に行う必要があるのは、selectタグ（「dropdownList」など）とリスト内のすべてのオプション（「option1」、「option2」、「option3」、「option4」など）にIDを指定することです。4つの異なるdiv（たとえば、「div1」、「div2」、「div3」、「div4」）があり、クリックするとドロップダウンリストで別の値を選択するとします。あなたはこれを行うことができます -

$("#div1").on("click",function(){$("dropdownList").val("option1");}); $("#div2").on("click",function(){$("dropdownList").val("option2");}); $("#div3").on("click",function(){$("dropdownList").val("option3");}); $("#div4").on("click",function(){$("dropdownList").val("option4");});

4つのdivを「masterDiv」と呼ばれる1つのマスターdivにラップすることで、いつでも最適化できます。

$("#masterDiv div").on("click",function(e){ $("#dropdownList option:selected").removeAttr("selected"); \\remove currently selected value $("#option"+e.target.id.charAt(e.target.id.length-1)).attr("selected","selected"); });

お役に立てれば。

于 2013-02-16T23:15:47.157 に答える
-1

これは、jquery トリガー関数を使用して選択をトリガーするボタンの例です。

 <!DOCTYPE html>
    <html>
    <head>

    <style>

    button { margin:10px; }

    div { color:blue; font-weight:bold; }

    span { color:red; }

    </style>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>

    <body>

    <select id = "slt">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

    <button id="btn">Button #2</button>

    <div><span>0</span> button #1 clicks.</div>

    <div><span>0</span> button #2 clicks.</div>

    <script>
 $("#slt").change(function () {

update($("span:first"));

});

$("button:last").click(function () {

$("#slt").trigger('change');

update($("span:last"));

});    
     function update(j) {

var n = parseInt(j.text(), 10);

j.text(n + 1);

}

    </script>

    </body>

    </html>
于 2013-02-16T12:11:55.290 に答える
-2

.change jQuery イベントは、選択フィールドの値が変更されたかどうかを検出し、jQuery アクションを実行して画像を表示できます。

.click を使用できますが、面倒になります。.change を使用するのが最適です。

http://api.jquery.com/change/

于 2013-02-16T12:08:46.040 に答える