关于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>
<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方法绑定问题~！！
你要隐藏的 这个div 没看见设置ID是setVal啊，没有ID是setVal当然不会触发，你要把想隐藏的tr设上这个id
这样你试试
```<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>
把想隐藏的tr设上id
改成这样试试
$("#mySelect").on('change',function(){
......
});
写法感觉没有问题，你在 }); 加上分号试试。
<br> $(document).ready(function(){ </p> <pre><code> $('#mySelect').change(function(){ var getVal = $('#mySelect').val(); console.log(getVal); if(getVal == 1) { $("#keyValue").hide(); } else { $("#keyValue").show(); } })； }) ； </script> </code></pre>
$("#mySelect").find("option:selected")val();
至于你要隐藏是一行 还是文本框，那就看你的需求而定义tr或者文本框的id做隐藏或显示
写的是没什么问题，如果是能够点击选中而alert("222")没有反应，那有可能就是事件发生了冲突
我怎么感觉你少引js了