Chuyển đổi lớp học từ trình đơn thả xuống

Tôi cố gắng chuyển đổi một lớp bằng cách chọn tùy chọn trong trình đơn thả xuống, tôi đã thử sử dụng cảnh báo() để kiểm tra xem nó có hoạt động hay không.Chuyển đổi lớp học từ trình đơn thả xuống

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)); 
});

Xin hãy giúp tôi giải quyết vấn đề này.

Nguồn

2015-06-12 Bin4ry

(" #dropdown option: selected "). văn bản(); – Bugfixer

bản sao có thể có của [jQuery toggle div from select option] (http://stackoverflow.com/questions/2767284/jquery-toggle-div-from-select-option) – Bugfixer

$('#dropdown option:selected') không phải là đối tượng trực tiếp. Mã của bạn liên kết trình xử lý nhấp chuột với tùy chọn đã chọn khi tải trang. Bạn nên sử dụng ủy quyền sự kiện hoặc nghe rõ hơn sự kiện change của phần tử 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)); 
});

Nguồn

2015-06-12 08:01:03 undefined

Khi tôi nhấp vào menu thả xuống và phải nhận văn bản bên trong thẻ . Tôi chỉ nhận được phản hồi: [Object object] – Bin4ry

@ Bin4ry Đó là vì bạn đang cảnh báo một đối tượng jQuery. Bạn nên sử dụng 'console.log' để gỡ lỗi. Ngoài ra để đăng nhập văn bản, bạn nên đăng nhập biến 'getText' không phải đối tượng jQuery đó. – undefined

kiểm tra ví dụ của tôi, đang hoạt động đầy đủ –

Bạn cần phải:

Kiểm tra document.ready được thực hiện

Gán sự kiện thay đổi

Để ràng buộc một số sự kiện để các yếu tố DOM, đòi hỏi phải có một tài liệu. đã sẵn sàng, để đảm bảo phần tử DOM được tạo chắc chắn tại thời điểm bạn kết hợp sự kiện .

Một trang không thể được thao tác một cách an toàn cho đến khi tài liệu là "sẵn sàng.": https://learn.jquery.com/using-jquery-core/document-ready/

Kiểm tra đoạn này:

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

Nguồn

2015-06-12 08:06:23

Làm cách nào để tôi chuyển sang lớp học, đây là những gì tôi đã thử: $ (tài liệu) .ready (function() { $ ('# dropdown') .change (function() { var getText = $ ('# dropdown option: selected'). html(); $ ('. overlay -' + getText) .toggle(); }); }); – Bin4ry

$ ("# objID"). ToggleClass ("classname"); hãy để tôi thực hiện thay đổi để hiển thị cho bạn –

kiểm tra chỉnh sửa !! –

Chuyển đổi lớp học từ trình đơn thả xuống

Trả lời

Các vấn đề liên quan