kzen.dev
Дополнительно
Вопрос

Выпадающий список с использованием javascript onchange

У меня есть простой выпадающий список, и я хочу сделать так, чтобы, если пользователь выбирает Have a Baby, сообщение менялось на 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!!";
}
Claudio Redi
Claudio Redi
Редактировал вопрос 22-го августа 2012 в 8:19
Программирование
javascript
onchange
Решение / Ответ

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

<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
Claudio Redi
Редактировал ответ 30-го июня 2015 в 11:59
43

Это не работает, потому что ваш скрипт в JSFiddle выполняется внутри собственной области видимости (см. выпадающий слева "OnLoad").

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

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

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

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

легко

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

этот пример показывает и скрывает div при выборе в combobox определенного значения

3
Похожие сообщества 12
JavaScript Jobs — чат
26 291 пользователей
JavaScript Jobs — чат для поиска работы и людей Правила оформления: @telegram-ru/r1WQe5F1m" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru
JavaScript Noobs — сообщество новичков
9 470 пользователей
Помогаем друг другу разбираться с JS Правила: @js_noobs_ru/rules" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@js_noobs_ru/rules Другие полезные чаты — https://github.com/goq/telegram-list или https://rudevs.network/ByKT2JwWQ
JavaScript — русскоговорящее сообщество
7 714 пользователей
Рекомендуем сразу отключить уведомления Правила: https://git.io/JycBd См. также: @js_noobs_ru, @nodejs_ru, @ts_cool, @react_js, @electron_cool Вакансии и поиск работы: @javascript_jobs
JavaScript.Ninja
3 822 пользователей
Правила поведения проекта https://telegra.ph/Kodeks-povedeniya-proekta-JavaScriptNinja-12-15
pro.js
3 724 пользователей
Сообщество веб (и javascript) разработчиков Чат для начинающих: @js_lib ⚠️ Вакансии - раз в неделю с вилкой зп ⚠️ Оффтоп -> @flood ❌Переход на личности ❌Троллинг ❌Реклама ❌Варез По всем вопросам: @igorz Зам: @slavik4
javascript_ru
2 726 пользователей
Сообщество любителей самого популярного языка программирования в мире. Публикация вакансий: @javascript_jobs Чаты: @frontend_ru @css_ru Каналы: @defront @frontendnoteschannel Флуд: @javascript_ru_flood Важно! http://nometa.xyz и http://neprivet.ru