easyui-combobox的置灰与可选与点击时触发事件
有时我们在做前端页面时会有置灰下拉框的场景,在用户点击某个按钮前,这个下拉框没法选择,也就是置灰状态,点击获取下拉框值按钮后这个下拉框才会处于可选状态。下面是代码:
<div>
下拉框:
<select id="text5" class="easyui-combobox" disabled=true >//disabled=true既为下拉框置灰
<option value="0">--请选择--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<a id="text4" class="easyui-linkbutton " onclick="getMessage()">获取信息</a>
</div>
<script>
function getMessage(){
$("#text5").combobox("enable");
}
</script>
上面这种是比较简单的点击按钮既可将置灰的combobox下拉框变为可选状态,如果想在点击按钮时弹出一个dialog显示加载中,在加载几秒后显示加载成功,之后置灰的combobox才为可选状态,下面是代码:
<div>
下拉框:
<select id="text5" class="easyui-combobox" disabled=true >//disabled=true既为下拉框置灰
<option value="0">--请选择--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<a id="text4" class="easyui-linkbutton " onclick="getMessage()">获取信息</a>
</div>
<div id="openDeviceNum" class="easyui-dialog" >
<div id="text10" style="text-align:center;">
<img src="data/load1.gif" width="100" height="100" /> //加载中的动图
</div>
<div id="text9" style="text-align:center;"> //加载中的文字
<p>加载中······</p>
</div>
<div id="text8" style="text-align:center;" class="pt30" >
<br/><br/> <p>获取成功</p> //获取成功在等待几秒后才会显示,加载中的两个div会隐藏
</div>
</div>
<script>
$(document).ready(function(){
$("#text8").hide(); //获取成功这个div默认隐藏
});
function getMessage(){ //点击获取按钮可以使置灰的combobox变为可选
function getMessage(){
$("#openDeviceNum").dialog("open"); //首先打开弹出框,显示加载中的图片与文字
setTimeout( function(){
$("#text9").hide(); //隐藏弹出框里图片所在的div
$("#text10").hide(); //隐藏弹出框里文字所在的div
$("#text8").show(); //显示加载成功
$("#text5").combobox("enable");
}, 2300 );//停顿2.3秒后执行这个方法体里的方法
}
</script>
当存在多个下拉框,选择第一个下拉框的值后,下一个置灰的下拉框的获取按钮才可以点击,代码如下:
<div>
下拉框:
<select id="text5" class="easyui-combobox" disabled=true >//disabled=true既为下拉框置灰
<option value="0">--请选择--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<a id="text4" class="easyui-linkbutton " onclick="getMessage()">获取信息</a>
</div>
<div>
选择下一跳地址:
<select id="text6" class="easyui-combobox " disabled=true;>
<option value="0">--请选择--</option>
<option value="1">172.16.0.1</option>
<option value="2">172.16.48.53</option>
</select>
<a id="text7" class="easyui-linkbutton" disabled=true onclick="getMessage1()">获取信息</a>
</div>
<div id="openDeviceNum" class="easyui-dialog" >
<div id="text10" style="text-align:center;">
<img src="data/load1.gif" width="100" height="100" /> //加载中的动图
</div>
<div id="text9" style="text-align:center;"> //加载中的文字
<p>加载中······</p>
</div>
<div id="text8" style="text-align:center;" class="pt30" >
<br/><br/> <p>获取成功</p> //获取成功在等待几秒后才会显示,加载中的两个div会隐藏
</div>
</div>
<script>
$(document).ready(function(){
$("#text8").hide(); //获取成功这个div默认隐藏
$("#text5").combobox({ //当下拉框的值改变后会触发该方法
//相当于html >> select >> onChange事件
onChange:function(){
$("#text7").linkbutton("enable");
}
})
});
function getMessage(){ //点击获取按钮可以使置灰的combobox变为可选
function getMessage(){
$("#openDeviceNum").dialog("open"); //首先打开弹出框,显示加载中的图片与文字
setTimeout( function(){
$("#text9").hide(); //隐藏弹出框里图片所在的div
$("#text10").hide(); //隐藏弹出框里文字所在的div
$("#text8").show(); //显示加载成功
$("#text5").combobox("enable");
}, 2300 );//停顿2.3秒后执行这个方法体里的方法
}
</script>
版权声明:本文为qq_39492374原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。