buyax
2017-11-30 07:50
采纳率: 53.3%
浏览 6.8k
已采纳

关于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条回答 默认 最新

  • 戀丶缈 2017-11-30 08:13
    已采纳
        <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方法绑定问题~!!
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • Kuroro_Lucifer 2017-11-30 07:54

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

    评论
    解决 无用
    打赏 举报
  • 啊咧咧丶 2017-11-30 07:57

    这样你试试

    
    ```<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>
    
    
    
    
    
    
    评论
    解决 无用
    打赏 举报
  • 挚爱小小蔡 2017-11-30 08:01

    把想隐藏的tr设上id

    评论
    解决 无用
    打赏 举报
  • 啊咧咧丶 2017-11-30 08:06

    改成这样试试

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

    
    
    评论
    解决 无用
    打赏 举报
  • Soul2016 2017-11-30 08:09

    写法感觉没有问题,你在 }); 加上分号试试。
    <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>

    评论
    解决 无用
    打赏 举报
  • syt_Jimmy 2017-11-30 08:09

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

    评论
    解决 无用
    打赏 举报
  • 阡路陌人 2017-11-30 08:46

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

    评论
    解决 无用
    打赏 举报
  • SYZM888 2017-11-30 08:53

    我怎么感觉你少引js了

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题