关于select下拉框选择触发事件,搞了一上午了,就是不触发,大佬帮忙看下代码

如题,我一个页面,有个下拉框,选一级就隐藏key值的输入框,二级就显示.
我搞了一上午了,本来页面还有其他的文本框了,都给我删了,就剩下这个下拉框
跟触发的这个框了,还是不动,是不是我那个function语句有问题啊~

图片说明


<%@ page contentType="text/html;charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>
<head>
<script type="text/javascript" src="${ctx}/static/js/validation.js"></script>
<script type="text/javascript" src="${ctx}/static/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.form.js"></script>

<script src="${ctx}/static/kindeditor-4.1.10/kindeditor-all-min.js"
    type="text/javascript"></script>
<script src="${ctx}/static/kindeditor-4.1.10/lang/zh_CN.js"
    type="text/javascript"></script>
</head>
<body>
    <div id="descriptionDiv" style="margin-left: 25%; margin-top: 2%">

        <br />
        <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>
        <br />
        <br />
        <tr style="height: 20px">
            <td><span class="labelFont">key的值 :</span></td>
            <td><input type="text" id="keyValue" name="" maxlength="20" style="width: 205px; height: 20px;" /></td>
            <td><font color="red">注意:type类型为view无key值,click则填写相关值</font></td>
        </tr>
    </div>
    <script type="text/javascript">
            $(document).ready(function(){ 
                        alert("111")
                    $('#mySelect').change(function(){  
                        alert("222")
                    var getVal = $(this).children('option:selected').val();
                    alert(getVal);
                                            if(getVal == 1) {
                                                    $("#keyValue").hide();
                                            } else {
                                                    $("#keyValue").show();
                                            }       
                            })
                        }) 

    </script>
</body>

</html>

9个回答

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

            </td>
        </tr>
        <br />
        <br />
        <tr style="height: 20px">
            <td><span class="labelFont">key的值 :</span></td>
            <td><input type="text" id="keyValue" name="" maxlength="20" style="width: 205px; height: 20px;" /></td>
            <td><font color="red">注意:type类型为view无key值,click则填写相关值</font></td>
        </tr>
    </div>
    <script type="text/javascript">
            $(document).ready(function(){ 
                function chooseGrade(getVal) {
                    if(getVal == 1) {
                        $("#keyValue").hide();
                    } else {
                        $("#keyValue").show();
                    }   
                }

    </script>
</body>
这样试试吧~!!个人感觉是combobox的onSelect方法绑定问题~!!
qq_34825461
戀丶缈 class="easyui-combobox" 个人感觉主要就是这个问题~!!你可以把他去掉试试~!!
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈: 主要是触发,我不知道为什么触发不了~.下拉框变化,触发change方法,我这里change方法死活不肯动一下
大约 2 年之前 回复
qq_34825461
戀丶缈 如果换成一般滴select标签这样写是没问题滴~!!combobox有些特殊~!!所以一般就要特殊处理~!!class用combobox取值滴话应该用$(选择器).combobox("getValue"); .val()是取不到值滴~!!取值之后也要判断一下取到值滴类型跟数字是否一样~!!
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈: 采纳了哦,~但是大佬能请教下,我刚是什么问题吗,很想探究
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈: 我是真不知道我刚才的写法哪里有问题,就是不触发
大约 2 年之前 回复
qq_34825461
戀丶缈 记得采纳~!!非常感谢~!!
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈: 大佬,可以加你联系方式吗~扣扣就好了~,求指点~
大约 2 年之前 回复
qq_34825461
戀丶缈 combobox里面Selected:true可以去掉 这个是设置默认选中值滴~!!
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈: 可以了~,牛皮
大约 2 年之前 回复
qq_34825461
戀丶缈 function chooseGrade(getVal) { if(Number(getVal.value) == 1) { $("#keyValue").hide(); } else { $("#keyValue").show(); } } 方法改成这样~!!
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈:直接加吗?~你这个有触发的function吗
大约 2 年之前 回复
qq_34825461
戀丶缈 if(Number(getVal.value) == 1) { $("#keyValue").hide(); } else { $("#keyValue").show(); } 这回应该好用了~!!我刚刚试过~!!
大约 2 年之前 回复
weixin_38221608
buyax 回复戀丶缈: 一样的~,换选下拉框,下面的key值框没点发应..
大约 2 年之前 回复
qq_34825461
戀丶缈 回复buyax: 下面js写滴有问题~!!$(document).ready(function(){ ~!!这行去掉试试~!!
大约 2 年之前 回复
weixin_38221608
buyax onSelect: function(rec){ chooseGrade(rec);这个会报错哦
大约 2 年之前 回复

你要隐藏的 这个div 没看见设置ID是setVal啊,没有ID是setVal当然不会触发,你要把想隐藏的tr设上这个id

weixin_38221608
buyax 回复Kuroro_Lucifer: 折腾的不清`
大约 2 年之前 回复
Kuroro_Lucifer
Kuroro_Lucifer 回复buyax: 看到你问题已经解决了就好,学习了
大约 2 年之前 回复
weixin_38221608
buyax 回复Kuroro_Lucifer: 没有报错哦~id,标签都试过了哦~
大约 2 年之前 回复
Kuroro_Lucifer
Kuroro_Lucifer 回复buyax: 看不出来有什么问题,浏览器控制台有报错吗?.chang方法试试别用id选择,用标签选择试试$(select).chang(cunction(){……});
大约 2 年之前 回复
weixin_38221608
buyax 我知道的,现在是alert(111)能出来,alert(222)不出来,根本就没走 $('#mySelect').change(function()方法
大约 2 年之前 回复

这样你试试


```<body>
    <div id="descriptionDiv" style="margin-left: 25%; margin-top: 2%">

        <br />
        <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>
        <br />
        <br />
        <tr style="height: 20px">
            <td><span class="labelFont">key的值 :</span></td>
            <td><input type="text" id="keyValue" name="" maxlength="20" style="width: 205px; height: 20px;" /></td>
            <td><font color="red">注意:type类型为view无key值,click则填写相关值</font></td>
        </tr>
    </div>
    <script type="text/javascript">
            $(document).ready(function(){ 

                    $('#mySelect').change(function(){  

                        var getVal = $('#mySelect').val();
                        console.log(getVal);
                                            if(getVal == 1) {
                                                $("#keyValue").hide();
                                            } else {
                                                $("#keyValue").show();
                                            }       
                            })
                        }) 

    </script>
</body>




weixin_38221608
buyax 回复啊咧咧丶: 是不是我引用的jq有问题啊
大约 2 年之前 回复
lsj1996
啊咧咧丶 回复buyax: 我用 静态的html写的 是可以改变的
大约 2 年之前 回复
weixin_38221608
buyax 亲,我知道那个id的问题,我只是忘记改了, 但是根本问题是因为 $('#mySelect').change(function(),我也换过其他的触发方法也是不走,好奇怪
大约 2 年之前 回复

把想隐藏的tr设上id

weixin_38221608
buyax 不是那个的问题
大约 2 年之前 回复

改成这样试试

$("#mySelect").on('change',function(){
......
});


weixin_38221608
buyax 可能是了~还是不行
大约 2 年之前 回复
lsj1996
啊咧咧丶 如果不行 就是你的jq引用的问题
大约 2 年之前 回复

$("#mySelect").find("option:selected")val();
至于你要隐藏是一行 还是文本框,那就看你的需求而定义tr或者文本框的id做隐藏或显示

写法感觉没有问题,你在 }); 加上分号试试。
<br> $(document).ready(function(){ </p> <pre><code> $(&#39;#mySelect&#39;).change(function(){ var getVal = $(&#39;#mySelect&#39;).val(); console.log(getVal); if(getVal == 1) { $(&quot;#keyValue&quot;).hide(); } else { $(&quot;#keyValue&quot;).show(); } }); }) ; &lt;/script&gt; </code></pre>

weixin_38221608
buyax 木有用哦
大约 2 年之前 回复

写的是没什么问题,如果是能够点击选中而alert("222")没有反应,那有可能就是事件发生了冲突

我怎么感觉你少引js了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问