Question

我想在点击图片时打开一个下拉菜单，并显示一条警告消息，说明正在点击哪个下拉选项。

我的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代码是什么？

虽然我在inernet上找到了一个用于下拉显示的jquery，但是也没有显示选择了哪个选项，而且我对jquery知之甚少。所以我想在javascript中使用代码。请帮助

我发现的Jquery如下：

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

我从答案中得到了代码，但这里的问题是假设在点击之前，如果栏是这样的：

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

单击图像后，条形变为：

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

如何降低它而不是一起显示？

Answer 1

如果您想要打开下拉菜单，不只是取消隐藏选择元素......嗯，您遇到了麻烦，因为没有通用或简单的解决方案。考虑构建自定义下拉菜单，尝试其他元素（如单选按钮）或使用Shadow DOM。

要显示所选选项，请使用以下内容：

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

Answer 2

您的实际代码是显示/隐藏选择;如果你想以编程方式打开选择是不可能的，即使你触发点击，下拉列表也不会打开，就像用户点击它一样。另一种方法是使用自定义选择显示插件（如chosen）。

要在选项上显示选择值，请单击使用change事件：

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

演示：http://jsfiddle.net/IrvinDominin/YdJzP/

Answer 3

如果您只想要JavaScript解决方案。

您可以使用以下方式切换组合：

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上的select后，您可以使用以下选项获取所选值：

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

    toggle();
}

以下是一个唯一的例子： JSFIDDLE

点击图片下拉菜单

3 个答案: