用JS怎么给select标签设置动态的默认值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS怎么给select标签设置动态的默认值相关的知识，希望对你有一定的参考价值。
在jsp页面中，加载这个页面时会从数据库传来一条记录<%=staff.getSection() %>，要将select的默认值设为此记录，请问怎么设置？
我的select标签下已有option选项，页面显示时显示出与数据库中提取的值相等的那个选项。
只需要一个JS函数，就可以让它的默认值能够根据后台所传过来的参数不同而变化。
参考如下：
JSP文件：
<body onload="checkModel()">
<form action="<%=request.getContextPath()%>/secretboxInfoAction.do" method="post" name="ClientForm">
<tr>
<td class="td"><span class="font13b">型号:</span>
<select id="mod" style="width:115pt" name="model" value="" onkeydown="model_prompt_del()">
<option value="">------请选择------
<option value="转盘" >转盘
<option value="密码" >密码
<option value="金柜" >金柜
</select>
<span id="model_prompt" class="style1">*</span><html:errors property="model"/>
</tr>
</body>
<script type="text/javascript">
function checkModel()
if("$secretboxInfo.model"=="转盘")
document.getElementById("mod").value="转盘";
else if("$secretboxInfo.model"=="密码")
document.getElementById("mod").value="密码";
else if("$secretboxInfo.model"=="金柜")
document.getElementById("mod").value="金柜";
else
document.getElementById("mod").value="";
</script> 参考技术A 首先看下你要把第几条设置为默认；
<option> 的id规律化写成 id="option"+index;的形式；
第几条就是index;
$("#option"+index).css("selected":"selected"); 参考技术B 直接设置下拉框的值就可以了
$("#selectid").val("defaultValue"); 参考技术C <select>
<option <% if(staff.getSection()==1) out.print("selected=''")%>>1</option>
<option <% if(staff.getSection()==2) out.print("selected=''")%>>2</option>
</select>
JQuery/JS select标签设置默认值设置禁止选择 button按钮禁止点击
//**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、设置禁止选择：**// $("#selectId").attr("disabled", "disabled"); $("#selectId").attr("style", "background-color: #EEEEEE;");//设为灰色，看起来更像不能操作的按钮
//**3、按钮禁止点击**// $(‘#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> </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"" /> <input type="button" value="协议打印" id="buttonPoint" onclick="Painting()" style="background-color: #339999; color: white;border-color: #339999""/> <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>
以上是关于用JS怎么给select标签设置动态的默认值的主要内容，如果未能解决你的问题，请参考以下文章