使用 javascript onchange 的下拉菜单答案

【问题标题】：Dropdown using javascript onchange使用 javascript onchange 的下拉菜单
【发布时间】：2012-08-18 06:55:08
【问题描述】：

我有一个简单的下拉菜单，我想拥有它，这样如果用户选择生孩子，消息就会更改为生孩子，但对于任何其他选择。消息保持不变（什么都没有），但这不起作用。有人可以帮忙吗。请玩我的 jsfiddle。

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

【问题讨论】：

看来您必须专门为 jsfiddle 重新定位该功能。我相信这是他们封装您编写的任何代码的方式，这样它就不会干扰他们的任何代码。 jsfiddle.net/Z9YJR/5

标签： javascript onchange

【解决方案1】：

这样的事情应该可以解决问题

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

【讨论】：

抱歉，错过了() onchange=leaveChange
您可以将选择对象传递给函数以获得更大的抽象... onchange="leaveChange(this)"... function leaveChange(elem){ if(e.value...跨度>

【解决方案2】：

它不起作用，因为您在 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!!";
};

【讨论】：

【解决方案3】：

简单

<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

【讨论】：

因为显然每个有 javascript 问题的人都在使用或想要使用 jQuery！