关于select下拉框选择触发事件,死活触发不了~请大佬帮忙看下~

如题:后台的我,不太会前端,请教下大佬,~
关于select下拉框选择触发事件,
下图

当我下拉框选中1级菜单时,上级菜单那个框要被隐藏,选中2级菜单,上级菜单的框就要显现
这个上级菜单是一个动态的获取数据库的,

图片说明

我尝试很多种了就是触发不了,

        <tr style="height: 20px">
            <td><span class="labelFont">菜单等级:</span></td>
            <td><input id="grade" name="grade" class="easyui-combobox"
                style="width: 218px; height: 30px;"
                data-options="
                              valueField: 'value',
                              textField: 'label',
                              data: [{
                                  label: '1级菜单',
                                  value: '1',
                              },{
                                  label: '2级菜单',
                                  value: '2'
                              }],
                              onSelect: function(rec){
                                  chooseGrade(rec);
                              }" />
            </td>
        </tr>

                <br />
        <tr style="height: 20px" >
            <td><span class="labelFont">上级菜单:</span></td>
            <td><input class="easyui-combobox" disabled = "disabled"
                style="width: 218px; height: 30px;" id="parentName"
                data-options="valueField:'parentId', textField:'parentName'" /></td>
        </tr>
        <br />
<script type="text/javascript">     
                    function chooseGrade(getVal) {
                if (Number(getVal.value) == 1) {
                    alert(1);
                    /* $("#parentName").prop("disabled",true); */
                    $("#parentName").combobox('disable');  
                    /* $("#parentName").attr("readonly","readonly") */
                    alert(2);
                    $("#keyValue").hide();
                    $("#url").hide();
                    /* $("#parentName").hide(); */
                } else {
                    alert(getVal.value);
                    /* $("#parentName").prop("disabled",false); */
                    /* $("#parentName").removeAttr("disabled"); */
                    $("#parentName").combobox('enable'); 
                    alert($("#parentName").attr("disabled"));

                    /* $("#parentName").attr("readonly","") */
                    alert(2);
                    $("#keyValue").show();
                    /* $("#parentName").show();  */
                    $("#url").show();
                }
            }
        </script>

我真的尝试了很多次,就是死活触发不了~,
请教下大佬,有实际例子更好了,感激不尽~~~

你没有option里面的值赋值到key的text的value里面

$(this).find("option:selected").val()

赋值到key的text的value里面

if(p1=='1'){
$('#otherDept').hide();
}else if(p1 == '2'){
$('#otherDept').show();
}
类似这样的代码，楼主试试

隐藏和显示通过hide()和show()方法实现。
代码如下：

$(document).ready(function(){ 　　　　$('#mySelect').change(function(){ 　　　　　　//alert($(this).children('option:selected').val()); 　　　　　　var p1=$(this).children('option:selected').val();//这就是selected的值 　　　　　　if (p1 == 2) { 　　　　　　 $("#myKeyTr").hide(); 　　　　　　} else { 　　　　　　 $("#myKeyTr").show() 　　　　　　} 　　　　}); 　　});


菜单等级:1级菜单2级菜单
key的值：


$(document).ready(function(){ 　　　　$('#mySelect').change(function(){ 　　　　　　//alert($(this).children('option:selected').val()); 　　　　　　var p1=$(this).children('option:selected').val();//这就是selected的值 　　　　　　if (p1 == 2) { 　　　　　　 $("#myKeyTr").hide(); 　　　　　　} else { 　　　　　　 $("#myKeyTr").show() 　　　　　　} 　　　　}); 　　});


菜单等级:1级菜单2级菜单
key的值：


代码重新贴一下，看这个。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>            
    $(document).ready(function(){  
　　　　$('#mySelect').change(function(){  
　　　　　　//alert($(this).children('option:selected').val());  
　　　　　　var p1=$(this).children('option:selected').val();//这就是selected的值 
　　　　　　if (p1 == 2) {
　　　　　　  $("#myKeyTr").hide();
　　　　　　} else {
　　　　　　  $("#myKeyTr").show()
　　　　　　}
　　　　});
　　});
</script>
</head>
<body>
<table>
    <tr style="height: 20px">
        <td><span class="labelFont">菜单等级:</span></td>
        <td><select class="easyui-combobox" id="mySelect" style="width: 218px; height: 30px;">
                <option name="grade" value="1">1级菜单</option>
                <option name="grade" value="2">2级菜单</option>
        </select></td>
    </tr>
    <tr id="myKeyTr">
        <td><span class="labelFont">key的值：</span></td>
        <td><input id="myKeyInput" class="easyui-combobox" type="text" style="width: 218px; height: 30px;">
        </td>
    </tr>
</table>

</body>
</html>

首先确定没有任何报错的地方，然后在触发事件前debugger一下 看下你选中的dom是不是你的目标select 然后控制台里看看change事件有没有问题 我一般就是粗心犯的错导致事件触发不了，一步步看看

option里面的值赋值到key的text的value里面

楼主if判断里，用字符串判断，加引号，不要判断数字试试

 <table>
            <tr style="height: 20px">
                <td><span class="labelFont">菜单等级:</span></td>
                <td>
                    <select class="easyui-combobox" id="mySelect" style="width: 218px; height: 30px;">
                        <option name="grade" value="1" selected>1级菜单</option>
                        <option name="grade" value="2">2级菜单</option>
                    </select>
                </td>
            </tr>
            <tr id="item">
                <td>key的值：</td>
                <td><input type="text" id="setVal" style="display: none;width: 214px; height: 22px;"></td>
            </tr>
        </table>
        <script>       
            $(document).ready(function(){ 
        　　　　$('#mySelect').change(function(){  
        　　　　　　var getVal = $(this).children('option:selected').val();
                    if(getVal == 1) {
                        $("#setVal").hide();
                    } else {
                        $("#setVal").show();
                    }       
        　　　　}) 
            }) 
        </script>

保证jQuery正确引入HTML文件中以上代码可以实现效果。
图片说明
图片说明

在select标签中加个onchange()事件

if(p1=='1'){
$('#otherDept').hide();
}else if(p1 == '2'){
$('#otherDept').show();
}

不是用change方法 是用selectedIndex方法

你这是eayui的select框 ，那初始化的时候就应该去绑定选择事件了

select 选择的。自己的默认的就可以啊。不级JS都可以

写个二级菜单设置值的方法，当一级菜单值变化时，把值作为参数调用二级菜单设置方法，试试看。

//改这个试试，你有没有动态生成的标签？

$(document).on('change','#mySelect',function(){

});
记得有个版本的jquery不能用show(),hide(),你用浏览器F12看看有没有报错

前端你用的是什么控件？

$("#source").on('change', function () {
try {
platform = this.value;
phoneJsonParam.sourceframe = this.value;
window.localStorage.setItem(currentPhoneName,JSON.stringify(phoneJsonParam));
$("#source").attr('title', this.value);
window.location.reload();
} catch (e) {
me.log.error(e);
}
});

select的change事件是选项改变之后触发，当前你的默认选项是一级菜单，只有点击了二级菜单后才算触发change事件，你可以在一级菜单前面加个option默认选项，或者改用click事件

解决了,说一下解决方法吧...还是那个combobox绑定方法特殊~前端框架用滴easyui
第一个:下拉框触发事件失效
easyui内置控件绑定时间一般都在dataoption里面绑定~这样才能触发事件(这是一位叫缥缈的朋友告诉我的)

第二个:下拉框添加不可编辑属性失效,原因：
我JSP页面这样写： style="width: 218px; height: 30px;" id="parentName"
data-options="valueField:'parentId', textField:'parentName'" />
其中 class="easyui-combobox" 已经使select不再是select了，而是div。
解决方法：
用easyui，combobox控件的disable方法。出处:http://blog.csdn.net/zengmingen/article/details/46873913
以下代码可以生效

        <tr style="height: 20px">
            <td><span class="labelFont">菜单等级:</span></td>
            <td><input id="grade" name="grade" class="easyui-combobox"
                style="width: 218px; height: 30px;"
                data-options="
                              valueField: 'value',
                              textField: 'label',
                              data: [{
                                  label: '1级菜单',
                                  value: '1',
                              },{
                                  label: '2级菜单',
                                  value: '2'
                              }],
                              onSelect: function(rec){
                                  chooseGrade(rec);
                              }" />
            </td>
        </tr>
        <br />


        function chooseGrade(getVal) {
            if (Number(getVal.value) == 1) {
                $("#parentName").combobox('disable');  
                $("#keyValue").hide();
                $("#url").hide();
            } else {
                alert(getVal.value);
                $("#parentName").combobox('enable'); 
                $("#keyValue").show();
                $("#url").show();
            }
        }

折腾的不行,可能是我太菜了.~希望遇到此坑的朋友可以借鉴以下

你没有option里面的值赋值到key的text的value里面

首先是不是隐藏了，或者本身页面整块框架的的error，实在不行试试调一下style 的大小px试试看看能不能打开option