从下拉菜单中切换课程答案

【问题标题】：Toggle class from dropdown menu从下拉菜单中切换课程
【发布时间】：2015-08-28 04:00:22
【问题描述】：

我尝试通过在下拉菜单中选择一个选项来切换课程，我尝试使用 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").text();
jQuery toggle div from select option的可能重复

标签： javascript jquery html drop-down-menu

【解决方案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));
});

【讨论】：

当我点击下拉菜单时，应该得到标签内的文本。我只得到回应：[Object object]
@Bin4ry 那是因为你正在警告一个 jQuery 对象。您应该使用console.log 进行调试。此外，对于记录文本，您应该记录 getText 变量而不是那个 jQuery 对象。

【解决方案2】：

你需要：

检查 document.ready 是否已执行

分配更改事件

要将一些事件绑定到 DOM 元素，需要一个 document.ready，以确保 DOM 元素在您关联事件。

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

检查这个sn-p：

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

【讨论】：

我将如何制作它以便切换我得到的类，这就是我尝试过的： $(document).ready(function() { $('#dropdown').change(function( ) { var getText = $('#dropdown option:selected').html(); $('.overlay-'+getText).toggle(); }); });
$("#objID").toggleClass("classname");让我改一下给你看
这行不通：$('#dropdown').toggleClass('.overlay-'+getText);
您需要删除“.”从你的班级名称。这。仅在 CSS 或 JQUERY 选择器中用于表示 THIS 是一个类："$(".green") w3schools.com/cssref/css_selectors.asp