从下拉菜单中切换类

Question

我尝试通过在下拉菜单中选择一个选项来切换一个类，我尝试使用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));
});

请帮我解决这个问题。

Answer 1

$('#dropdown option:selected')不是活动对象。 您的代码将点击处理程序绑定到页面加载时的选定选项。 您应该使用事件委派或更好地监听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));
});

Answer 2

你需要：

检查document.ready已执行

分配更改事件

要将某些事件绑定到DOM元素，需要document.ready，以确保在关联事件时确保创建DOM元素。

在文档“准备就绪”之前，页面无法安全操作： https ： //learn.jquery.com/using-jquery-core/document-ready/

检查此代码段：

 $(document).ready(function() { $('#dropdown').change(function() { var getText = $('#dropdown option:selected').html(); $("#test").removeClass(); $("#test").toggleClass("overlay-" + getText); }); });

 .overlay-Steinkjer { background-color: red; } .overlay-Verdal { background-color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <select id="dropdown"> <option value="1">Steinkjer</option> <option value="2">Verdal</option> </select> <p id="test">test paragraph</p> </body> </html>

从下拉菜单中切换类

问题描述

2 个解决方案

解决方案1
4 2015-06-12 08:01:03

解决方案2
3 2015-06-12 08:06:23

从下拉菜单中切换类

问题描述

2 个解决方案

解决方案1 4 2015-06-12 08:01:03

解决方案2 3 2015-06-12 08:06:23

解决方案1
4 2015-06-12 08:01:03

解决方案2
3 2015-06-12 08:06:23