HTML由一個div或圖像

選擇觸發我有類似於下面的示例一個<select>菜單：HTML由一個div或圖像

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

在某些網站上，我看到這個菜單可以通過外部圖像或DIV被觸發。

我已經在谷歌搜索，但幾乎所有的問題和答案都有關如何列出圖像內選擇，這不是我需要的。當點擊DIV或圖像時，我想要選擇菜單。

如何通過點擊另一個DOM元素來觸發此選擇菜單，即div？

PS。我的網站已經包含jQuery。

來源

2013-02-16 Phil

除非您使用由'divs'等製作的一些自定義選擇框，否則不能這樣做。 – dfsq 2013-02-16 12:08:26

@dfsq，那是不正確的。許多網頁使用這種「剝皮」。 – Phil 2013-02-16 12:10:21

我不認爲這是可能的，這些網站可能正在使用一個自定義的菜單看起來類似於原來的。像這樣一個https://github.com/claviska/jquery-selectBox – 2013-02-16 12:10:54

-2

.change jQuery事件將檢測select字段的值是否已更改，然後您可以執行jQuery操作來顯示圖像。

您可以使用.click，但會變得混亂。最好使用.change。

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

來源

2013-02-16 12:08:46

我不想顯示任何圖像。我希望在單擊div或圖像時出現選擇菜單。 – Phil 2013-02-16 12:09:16

-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-16 12:11:55

請修正您的格式 – 2013-02-16 12:12:44

選擇您的代碼並用'{}'按鈕縮進（4個空格）。 – dfsq 2013-02-16 12:14:51

另外，OP的問題與'select'元素被觸發有關，其行爲與'button'元素不同。例如，你不能簡單地調用'.trigger（'click'）'選擇並打開它們。（[example]（http://jsfiddle.net/XccPC/1/）） – 2013-02-16 12:18:52

的，我假設你想在下拉/選擇列表中選擇一個特定的值，當用戶點擊一個特定的div被點擊。

你需要做的第一件事是給選擇標籤（稱爲「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只格在一個叫「masterDiv」主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-16 23:15:47

在這裏，我編寫了一個script on 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 
    }); 
});

基於這個腳本，你可以通過添加例如URL到每增加了很多功能選項（例如：data-link =「http://google.com」）和window.location更改，或任何你想要的。

無論如何，如果你想要一個真正的踢屁股插件，使其自動我建議msDropdown（Documentation here）。

這個插件可以讓你創建自定義選擇與圖像，描述和許多其他功能，通過簡單的綁定他們與選擇標記或JSON信息。希望就是你要找的。

來源

2014-04-14 20:59:02

HTML由一個div或圖像

回答

相關問題