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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>