search

Home  >  Article  >  Web Front-end  >  JS method to obtain the display value of the drop-down box and determine the radio button_javascript skills

JS method to obtain the display value of the drop-down box and determine the radio button_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:50:551262browse

The example in this article describes the JS method of obtaining the display value of the drop-down box and judging the radio button. Share it with everyone for your reference. The details are as follows:

1. I have done many projects, and I need to get the value displayed by the select component. Here are the methods I often use:

Html source code is as follows: 

<html><body>
<select id="province" name="province" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">江苏</option>
<option value="4">河北</option>
</select>
<br/>
<input type="text" id="provinceName" name="provinceName"/>
<input type="button" onClick="setTxt()" value="赋值"/>
</body></html>

The JS function is as follows: 

function setTxt()
{
 var _selObj=document.getElementByIdx_xx('province');//取下拉框的元素
 var _selVal=_selObj[_selObj.selectedIndex].text;//取下拉框被选中的值
 document.getElementByIdx_xx('provinceName').value=_selVal;
}

2. I have done a lot of judging whether the radio button is selected. The following is the method I often use:

HTML page source code is as follows: 

<html><body>
<input type="radio" name="time" value="2009-05-20"/>2009-05-20
<input type="radio" name="time" value="2009-05-21"/>2009-05-21
<input type="radio" name="time" value="2009-05-22"/>2009-05-22
<input type="radio" name="time" value="2009-05-23"/>2009-05-23
<input type="button" value="判断是否选择" onclick="alert(judge())"/>
</body></html>

JS function code: 

function judge()
{ var status =false;
 var _radObj=document.getElementsByName('time');
 for(var i =0;i<_radObj.length;i++){
  if(_radObj[i].checked){
  status=true;
  }
 }
 if(! status){
  alert('未选中时间!');
 }
 return status;
}

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery implements form validation and prevents illegal submissionsNext article：jquery implements form validation and prevents illegal submissions

Related articles

See more