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')不是实时对象。您的代码将点击处理程序绑定到页面加载时的选定选项。您应该使用事件委派或更好地收听change元素的select事件。

$('#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，to   确保在关联时确保创建DOM元素   事件

在文档准备就绪之前，页面无法安全操作。＆＃34;：https://learn.jquery.com/using-jquery-core/document-ready/

检查此代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

从下拉菜单中切换类

2 个答案: