Раскрывающаяся папка с использованием javascript onchange

17

У меня есть простое раскрытие, и я хочу, чтобы он был таким, чтобы, если пользователь выбирает «У ребенка», сообщение меняется на «Have a Baby», но для любого другого выбора. Сообщение остается тем же (ничего), но это не работает. Может кому-то помочь. Пожалуйста, играйте с моим jsfiddle.

Ссылка Вот 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>

Вот js

function changeMessage() {
    document.getElementById("message").innerHTML = "Having a Baby!!";
}
    
задан John Doe 22.08.2012 в 21:27
источник
  • Похоже, вам нужно переместить функцию для jsfiddle специально. Я считаю, что это их способ инкапсулировать любой код, который вы пишете, чтобы он не мешал ни одному из их кодов. jsfiddle.net/Z9YJR/5 –  Shmiddty 22.08.2012 в 21:36
  • Ах! Спасибо Шмиддти :) –  John Doe 22.08.2012 в 21:37

3 ответа

37

Что-то вроде этого должно сделать трюк

<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

Более короткая версия и более общие могут быть

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 22.08.2012 в 21:31
источник
  • Когда я запускаю его, он никогда ничего не отображает для сообщения. –  John Doe 22.08.2012 в 21:34
  • извините, пропущено () on onchange = leaveChange –  Claudio Redi 22.08.2012 в 21:37
  • Вы можете передать объект select в функцию для большей абстракции ... onchange="leaveChange (this)" ... function leaveChange (elem) {if (e.value ... –  FrankieTheKneeMan 22.08.2012 в 21:43
2

Легко

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

этот пример показывает и скрывает div, если в поле со списком выделено определенное значение

    
ответ дан offboard 15.05.2013 в 14:50
источник
  • Потому что очевидно, что каждый, у кого есть проблема с javascript, использует или хочет использовать jQuery! –  Jeroen van den Broek 23.05.2015 в 22:00
1

Это не работает, потому что ваш скрипт в JSFiddle запущен внутри собственной области видимости (см. раздел «OnLoad» слева внизу).

Один из способов связать обработчик событий в javascript (где он должен быть):

document.getElementById('optionID').onchange = function () {
    document.getElementById("message").innerHTML = "Having a Baby!!";
};

Другой способ - изменить свой код для среды скрипта и явно объявить свою глобальную функцию, чтобы ее можно было найти с помощью встроенного обработчика событий:

window.changeMessage() {
    document.getElementById("message").innerHTML = "Having a Baby!!";
};

    

ответ дан jbabey 22.08.2012 в 21:40
источник