Saya memiliki drop down sederhana dan saya ingin membuatnya sehingga jika pengguna memilih Have a Baby, pesan berubah menjadi Have a Baby, tetapi untuk pilihan lainnya. Pesannya tetap sama (tidak ada), tetapi ini tidak berfungsi. Bisakah seseorang membantu. Silakan bermain dengan jsfiddle saya.
Berikut adalah html<select id="leave">
<option value="5">Get Married</option>
<option onchange="changeMessage()" value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="15">Retire</option>
<option value="15">Military Leave</option>
<option value="15">Medical Leave</option>
</select>
<div id="message"></div>
Berikut adalah js
function changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
}
Sesuatu seperti ini akan berhasil
<select id="leave" onchange="leaveChange()">
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="15">Retire</option>
<option value="15">Military Leave</option>
<option value="15">Medical Leave</option>
</select>
<div id="message"></div>
Javascript
function leaveChange() {
if (document.getElementById("leave").value != "100"){
document.getElementById("message").innerHTML = "Common message";
}
else{
document.getElementById("message").innerHTML = "Having a Baby!!";
}
}
Versi yang lebih singkat dan lebih umum bisa berupa
HTML
<select id="leave" onchange="leaveChange(this)">
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="15">Retire</option>
<option value="15">Military Leave</option>
<option value="15">Medical Leave</option>
</select>
Javascript
function leaveChange(control) {
var msg = control.value == "100" ? "Having a Baby!!" : "Common message";
document.getElementById("message").innerHTML = msg;
}
Ini tidak bekerja karena skrip Anda di JSFiddle berjalan di dalam ruang lingkupnya sendiri (lihat drop down "OnLoad" di sebelah kiri?).
Salah satu cara untuk mengatasinya adalah dengan mengikat event handler Anda di javascript (di mana seharusnya):
document.getElementById('optionID').onchange = function () {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
Cara lain adalah dengan memodifikasi kode Anda untuk lingkungan fiddle dan secara eksplisit mendeklarasikan fungsi Anda sebagai global sehingga dapat ditemukan oleh event handler inline Anda:
window.changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
mudah
<script src="js/libs/jquery-1.8.3.min.js"></script><script>
jQuery.noConflict()(document).ready(function() {
$('#hide').css('display','none');
$('#plano').change(function(){
if(document.getElementById('plano').value == 1){
$('#hide').show('slow');
}else
if(document.getElementById('plano').value == 0){
$('#hide').hide('slow');
}else
if(document.getElementById('plano').value == 0){
$('#hide').css('display','none');
}
});
$('#plano').change();
});
</script>
contoh ini menunjukkan dan menyembunyikan div jika dipilih dalam combobox beberapa nilai tertentu