從下拉菜單中切換課程

我嘗試通過在下拉菜單中選擇一個選項來切換課程，我嘗試過使用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)); 
});

請幫我解決這個問題。

來源

2015-06-12 Bin4ry

（」 #dropdown選項：selected「）。text（）; – Bugfixer

[jQuery切換div從選擇選項]的可能重複（http://stackoverflow.com/questions/2767284/jquery-toggle-div-from-select-option） – Bugfixer

$('#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)); 
});

來源

2015-06-12 08:01:03 undefined

當我點擊下拉，並應該得到文本里面的標記。我只得到迴應：[Object object] – Bin4ry

@ Bin4ry這是因爲你正在提醒一個jQuery對象。你應該使用'console.log'進行調試。另外爲了記錄文本，你應該記錄'getText'變量而不是那個jQuery對象。 – undefined

檢查我的例子，全是工作 –

你需要：執行

檢查的document.ready

指定更改事件

要綁定一些事件DOM元素，需要的文檔。準備好，以確保您在關聯事件時確定已創建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>

來源

2015-06-12 08:06:23

我會怎麼做，以便它切換課堂上，我得到的，這是我的嘗試： $（文件）。就緒（函數（）{ $（「＃下拉菜單」）（）。;（）.tggle（）; }）; }）; .change（function（）{ var getText = $（'＃dropdown option：selected'）。html（）; $（'。overlay - '+ getText）.toggle – Bin4ry

$（「＃objID」）。toggleClass（「classname」）;讓我做個改變，告訴你 –

檢查編輯！ –

從下拉菜單中切換課程

回答

相關問題