kzen.dev
Lebih
Question

Dropdown menggunakan javascript onchange

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!!";
}
Claudio Redi
Claudio Redi
Pertanyaan edit 22 Agustus 2012 в 8:19
Pemrograman
javascript
onchange
Solution / Answer

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!!";
    }        
}

jsFiddle Demo

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;
}
Claudio Redi
Claudio Redi
Jawaban edit 30 Juni 2015 в 11:59
43

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!!";
};
4

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

3
Related communities 1
JavaScript Indonesia
16 345 pengguna
Grup JavaScript yang membahas JavaScript, framework JS, dan Node JS secara universal. Cek Pinned Message untuk keterangan lebih lanjut. Komunitas ReactJS: https://t.me/react_idn