JS获取Select标签选中的值

项目中用到下拉标签<select> 进行来定义范围搜索功能,而灰显提示的内容却是不一样的。需要用到JS获取Select值,来进行判断提示。

  • JavaScript方法
var obj = document.getElementById("控件ID");//获取
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值</span>

  • JQuery方法
$("#testSelect ").get(0).selectedIndex;//索引
$('#testSelect option:selected') .val();//选中的值
$('#testSelect option:selected').text();//选中的文本</span>

案例:

第一步:这是<select>控件
<select  οnchange="change(this)" id="search_name" name="test" >
	 <option value="1">这里是一</option>
	 <option value="2">这里是二</option>
	 <option value="3">这里是三</option>
</select>
第二步:写js方法(我这里直接用下拉框选项的索引值进行给<input>赋提示信息的值)
function change(s){
	v = s.options[s.selectedIndex].value
 	if(v==1){
 	<span style="white-space:pre">	</span>document.getElementById("frvalue2").value="提示1"
 	}else{
 		document.getElementById("frvalue2").value="提示2"
 	}
}
第三步:给input设置初始提示值,指定下得,失焦点事件。
<input value="提示内容" 
<!-- 获得焦点事件 -->
onFocus='if (this.value == "提示1" || this.value == "提示2") {this.value ="";this.style.color = "";}'  //清空提示的值
<!-- 失去焦点事件 -->
onBlur='if (this.value == "")  { var obj = document.getElementById("search_name");var index = obj.selectedIndex;  if(index==0){this.value = "提示1";}else{ this.value = "提示2";} this.style.color = "#ac0820";}'   //获取提示的值
<!-- 以下是样式不用管 -->
style=" color:#ac0820; font-size:12px;line-height:18px;height:20px; float:left; width:205px;margin-left:0px; margin-top:0px; border:1px solid #fff" type="text" name="frvalue" id="frvalue2"  />
以上例子,仅供参考。写的不是很好。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取select标签选中,可以使用以下几种方法: 1. 如果select标签有id属性,可以使用JavaScript的getElementById方法来获取选中。例如,如果select标签的id属性是"xx",可以使用var v = document.getElementById("xx").value;来获取选中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [js获取select标签选中](https://blog.csdn.net/weixin_34174422/article/details/94567053)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [js获取select标签选中的两种方式](https://download.csdn.net/download/weixin_38660069/13633389)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [JS中操作<select标签选的](https://blog.csdn.net/cnds123/article/details/128353007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值