JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

时间:2022-08-07 05:13:54
//**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用法大全