zoukankan      html  css  js  c++  java
  • JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1、设置选中值:(根据索引确定选中值)**//
    var osel=document.getElementById("selID"); //得到select的ID
      var opts=osel.getElementsByTagName("option");//得到数组option
      var obt=document.getElementById("bt");
      obt.onclick=function(){
        opts[3].selected=true;//设置option第4个元素,即value="3"为默认选中
      }
    //**2、通过原生JS来实现设置选中值,(根据value值确定选中值)**//
    
    /** 
     * 设置select控件选中 
     * @param selectId select的id值 
     * @param checkValue 选中option的值 //实际情况中可能不是options,而是context,具体自定
    */  
    function set_select_checked(selID, checkValue){  
        var select = document.getElementById(selID);  
        for (var i = 0; i < select.options.length; i++){  
            if (select.options[i].value == checkValue){  
                select.options[i].selected = true;  
                break;  
            }  
        }  
    }
    
    
    //**3、设置禁止选择:**//
    $("#selectId").attr("disabled", "disabled");
    $("#selectId").attr("style", "background-color: #EEEEEE;");//设为灰色,看起来更像不能操作的按钮
    
    //**4、按钮禁止点击**//
    $('#buttonId').attr("disabled", true);
    $("#buttonId").attr("style", "background-color: #EEEEEE;");//设为灰色,看起来更像不能操作的按钮 

    实例:

    <!---省略部分代码--->
    <tbody>
            <tr class="firstRow">
                <td valign="top" style="word-break: break-all;  20%;" rowspan="1" colspan="1">
                    <select id="mekeupType" onchange="MekeupTypeChange();">
                        <option value="moneyWay">货币补偿</option>
                        <option value="houseWay">房屋补偿</option>
                    </select>
                    &nbsp; &nbsp;&nbsp;
                </td>
                <td valign="top" style="word-break: break-all;  50%;" rowspan="1" colspan="1">
                <input type="button" value="计算" id="buttonCount" onclick="buttonCountClick();" style="background-color: #339999; color: white;border-color: #339999"" />&nbsp; &nbsp;&nbsp;
                <input type="button" value="协议打印" id="buttonPoint" onclick="Painting()" style="background-color: #339999; color: white;border-color: #339999""/>&nbsp; &nbsp;&nbsp;
                <input type="button" value="签约确认" id="buttonSign" onclick="Sign()" style="background-color: #339999; color: white;border-color: #339999"/>
                    @*<input type="button"  value="返回列表" id="buttonBack" onclick="GoBackList();"/>*@
                </td>
                <td width="189" valign="top"></td>
                <td width="189" valign="top"></td>
                <td width="189" valign="top"></td>
                <td width="189" valign="top"></td>
            </tr>
        </tbody>
    </table>
    <!---省略部分代码--->
    
     <script> $(document).ready(function () {
      //*****省略部分代码*****//
        var mekeupel = document.getElementById("mekeupType"); //得到select的ID
        var opts = mekeupel.getElementsByTagName("option");//得到数组option
        if (compensationMethod.toLowerCase() == "null") {//null
            //null
        }
        else if (compensationMethod.toLowerCase() == "33c3e03a-3bb6-4147-87bd-4c77b84d615b".toLowerCase()) //货币
        {
            opts[0].selected = true;//设置option第1个元素
        }
        else if (compensationMethod.toLowerCase() == "c80ea27b-2d11-4e7d-8d6e-65d2b5210d8a".toLowerCase()) //产权置换
        {
            opts[1].selected = true;//设置option第1个元素
        }
        IsSign = parseInt(data[0]["issign"]);
        if (1 == IsSign) {
            //设置安置补偿方式禁止选择
            //disabled="disabled"
            //background-color: #EEEEEE;
            $("#mekeupType").attr("disabled", "disabled");
            $("#mekeupType").attr("style", "background-color: #EEEEEE;");
            //设置计算按钮、签约确认按钮   禁止click
            $('#buttonCount').attr("disabled", true);
            $("#buttonCount").attr("style", "background-color: #EEEEEE;");
            $('#buttonSign').attr("disabled", true);
            $("#buttonSign").attr("style", "background-color: #EEEEEE;");
        } else {
        }
    //*****省略部分代码*****//
    });
    
    </script>

    获取select选中值

     var select = document.getElementById("HouseType");
     var index = select.selectedIndex; // 选中索引
     var text = select.options[index].text; // 选中文本
     var value = select.options[index].value;//选中值
     //document.getElementById("ZSGYTD_HouseInfo.HouseType").value = value;

    select用法拓展阅读:select用法大全

  • 相关阅读:
    软件工程——第十次作业
    第33次Scrum会议(11/21)【欢迎来怼】
    软件工程——第九次作业
    第26次Scrum会议(11/14)【欢迎来怼】
    软件工程——第八次作业
    psp总结报告
    第十二周psp
    第十一周psp
    探路者团队-贪吃蛇(测评人:刘耀泽)
    “Hello World!”团队第六周第七次会议
  • 原文地址:https://www.cnblogs.com/dyhao/p/10028052.html
Copyright © 2011-2022 走看看