點擊圖片的下拉菜單

我想打開一個圖片點擊的下拉菜單，並顯示一條警告消息，指出正在單擊哪個下拉選項。點擊圖片的下拉菜單

我的HTML代碼是：

<div class="account_notification"> 
<a href="#"> 
<div class="notify_notification">click</div><!-- notify_notification close --></a> 
</div><!-- account_notification close --> 
<select class="select1" size="5" style="display:none">   
    <option name="test" value="" class="first">Select</option>  
    <option name="test" value="" class="">NOTIFICATION1</option>  
    <option name="test" value="" class="">NOTIFICATION2</option> 
</select>

會有什麼javascript代碼這樣做呢？

雖然我發現一個jQuery的inernet的下拉列表顯示，但也沒有表示哪一個選項被選中，也是我很少知道jQuery的。所以我想在javascript.Please代碼幫助

jQuery的，我發現是遵循：

$('.notify_notification').click(function() { 
    $('.select1').toggle(); 
});

我得到了代碼的答案，但如果欄是這樣這裏的問題是點擊之前假設：

http://postimg.org/image/n04ggm7ux/

點擊圖片酒吧成爲後：

http://postimg.org/image/4h344hl7t/

如何獲得下來，而不是沿側面顯示的？

來源

2014-04-06 user3499007

如果你想開放的下拉列表中，而不僅僅是取消隱藏選擇元素......好吧，你就麻煩了，因爲對於沒有通用或簡單的解決方案。考慮構建自定義下拉列表，嘗試其他元素（如單選按鈕）或使用Shadow DOM。

要顯示所選擇的選項，使用這樣的：

alert($('.select1 option:selected').text()); //show text of selected option 
alert($('.select1').val()); //show selected value

來源

2014-04-06 11:49:51

你實際的代碼顯示/隱藏的選擇;如果你想以編程方式打開選擇是不可能的，即使你觸發點擊下拉列表不會打開，就好像用戶點擊它一樣。另一種方法是使用自定義選擇顯示插件（如chosen）。

要顯示選項，單擊選擇值使用change事件：如果您只想JavaScript解決方案http://jsfiddle.net/IrvinDominin/YdJzP/

來源

2014-04-06 11:54:36

：

$('.select1').change(function(){ 
    alert($(this).val()); 
    alert($(this).find('option:selected').text()) 
});

演示。

你可以用這個切換您的組合：

function toggle(){ 
    var elem = document.getElementById("myselect"); 
    if(elem.style.display == "none") 
     elem.style.display = "block"; 
    else 
     elem.style.display = "none"; 
};

並添加onchange="selectHandler(this)"您選擇的HTML之後，你可以用選擇的值：

function selectHandler(x) { 
    if(x.value!="") 
     alert("Selected: "+x.value); 

    toggle(); 
}

這裏是唯一的例子：JSFIDDLE

來源

2014-04-06 12:01:06

您的代碼無疑是有幫助的。但我面臨着一個問題，我在我的帖子中編輯它。請幫助解決它 – user3499007

您必須使用CSS來做到這一點，將菜單項div中包含下拉菜單的每個菜單按鈕換掉，然後根據該菜單調整下拉菜單按鈕，只要你想。檢查這個小提琴的例子：http://jsfiddle.net/cemozer/Fx8hf/3/調整頂部和左側的屬性，如你所願。 –

點擊圖片的下拉菜單

回答

相關問題