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; width: 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; width: 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用法大全