javascript - 从下拉菜单切换类

标签 javascript jquery html drop-down-menu

我尝试通过在下拉菜单中选择一个选项来切换类,我尝试使用 alert() 来检查它是否有效,但我似乎无法让它正常工作。

HTML:

<html>
<body>
    <select id="dropdown">
        <option value="1">Steinkjer</option>
        <option value="2">Verdal</option>
    </select>
</body>
</html>

Javascript:

$('#dropdown option:selected').click(function(){
    var getText = $('#dropdown option').text();
    alert($('.overlay-'+getText));
});

请帮我解决这个问题。

最佳答案

$('#dropdown option:selected') 不是事件对象。您的代码将点击处理程序绑定(bind)到页面加载时的选定选项。您应该使用事件委托(delegate)或更好地监听 select 元素的 change 事件。

$('#dropdown').on('change', function() {
    // Get text content of the selected option
    var getText = $('option:selected', this).text();
    // Get current value of the select element
    // var getValue = this.value;
    console.log(getText);
    console.log($('.overlay-'+getText));
});

关于javascript - 从下拉菜单切换类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30798042/

相关文章:

javascript - react + redux + axios : actions not sent to reducers

javascript - 如何将文档读入javascript

jQuery Waypoints - 如何在每次页面滚动且元素处于 View 中时触发操作?

html - 使用 css 裁剪图像以保持适当的缩放效果

html - CSS - 表格 - TH 悬停设置 TD 可见性

javascript - 填充格式化日期表单选择菜单

javascript - 如何为 NetSuite 中的 HTML 元素提供 DOM 中的 ID?

javascript - 如何使用 jQuery.ajax 将此 JSON 转换为在 HTML 中显示,为什么最后是 0?

javascript - 只有一次ajax调用,等到下一次点击成功

html - 如何使底部的图像在html或css中转到顶部图像的右侧?