서버 제어 value_javascript 기술을 얻기 위한 js 코드
- WBOY원래의
- 2016-05-16 18:33:021022검색
1. 드롭다운 목록에서 선택한 항목의 값과 텍스트를 가져옵니다(select)
select.htm 코드 예시는 다음과 같습니다.
드롭다운 목록에서 선택한 항목(선택)</head> <br> <br><script>//선택한 항목의 텍스트 가져오기 드롭다운 목록<BR>function getSelectedText(name){ <BR>var obj=document.getElementById( name) <BR>for(i=0;i<obj.length;i ){ <BR>if( obj[i].selected==true){ <BR>return obj[i].innerText; // 옵션 객체의 innerText 속성을 통해 옵션 텍스트를 가져오는 것이 핵심입니다 <BR>} <BR>} <BR>} <BR>//드롭다운 목록에서 선택한 항목의 값을 가져옵니다. <BR>function getSelectedValue(name){ <BR>var obj =document.getElementById(name) <BR>return obj.value; //매우 간단하므로 객체의 value 속성을 사용하여 직접 가져올 수 있습니다.<BR></script><BR><select id="myselect"><option value ="주먹">1</option> <BR><옵션 값="두 번째">2</option> <BR><옵션 값 ="세 번째">3</option> <BR><input type="button" value="선택한 텍스트" /> <BR><input type="button " value="selected value" /><BR>< /body> <BR></html> <BR><BR> <BR><BR>2. 라디오 버튼(라디오) 그룹 가져오기 및 선택한 항목 수정 <BR></script>
</div> 드롭다운 목록(또한 목록 항목의 배열)은 라디오 버튼 그룹과 동일하지만 js는 document.getElementById("oper").value를 직접 사용하여 라디오 버튼 그룹의 값을 가져올 수 있습니다. 이 방법으로 드롭다운 목록의 값을 얻을 수 있지만 라디오 버튼 그룹은 선택한 값을 얻을 수 없습니다. 주의 깊게 연구한 결과 요약은 다음과 같습니다. <br> 드롭다운 목록과 달리 라디오 버튼은 this.form.oper 또는 document.getElementsByName('oper')을 사용하여 배열 객체를 가져와야 합니다. oper')는 배열 객체를 가져올 수 없습니다(선택 가능). 또한 루프 판단을 통해 값을 얻어야 하며 .value를 직접 사용할 수는 없습니다(select를 사용할 수 있음). 라디오 버튼 그룹의 선택된 항목을 변경하려면 루프 판단을 사용하여 각 라디오 버튼의 값도 변경해야 합니다. <strong>radio.html 테스트 코드는 다음과 같습니다. <br></strong><br><br><br>코드 복사<div class="codetitle"><span><a style="CURSOR: pointer" data="79340" class="copybut" id="copybut79340" onclick="doCopy('code79340')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code79340">
<br><html> <br><head></head> <br><script 언어="javascript"> <br>//다음에 적용할 수 있는 라디오 버튼 값 찾기 단일 옵션 및 다중 옵션. 선택 항목이 없으면 false를 반환하고, 선택 항목이 있으면 옵션 값을 반환합니다. <br>function getRadio(oRadio){ <br>var oRadioLength= oRadio.length; <br>var oRadioValue = false;//alert("oRadioLength:[" oRadioLength "]") <br> oRadioLength== 정의되지 않음){ <br>if (oRadio.checked){ <br>oRadioValue = oRadio.value; <br>} <br>}else{ <br>for (i=0;i<oRadioLength;i ) { <BR>//alert("oRadio[" i "]:" oRadio[i].checked "/" oRadio[i].value) <BR>if (oRadio[i].checked){ <BR> oRadioValue = oRadio[i].value; <BR>break; <BR>} <BR>} <BR>} <BR>return oRadioValue; <BR>} //방법 개선: <BR>//질문 라디오 이름을 매개변수로 전달하는 라디오 버튼의 값입니다. 선택 항목이 없으면 false를 반환하고, 선택 항목이 있으면 옵션 값을 반환합니다. <BR>function getRadioValue(name){ <BR>var radioes = document.getElementsByName(name) <BR>for(var i=0;i<radioes.length;i ) <BR>{ <BR>if(radioes) [i].checked){ <BR>return radioes[i].value; <BR>} <BR>} <BR>return false; <BR>} <BR>//선택한 라디오 버튼을 값으로 수정 <BR>functionchangeRadio(oRadio,oRadioValue){ //객체 전달 <BR>for(var i=0;i<oRadio.length;i ) //루프 <BR>{ <BR>if(oRadio[i ]. value==oRadioValue) //비교 값<BR>{ <BR>oRadio[i].checked=true; //선택한 상태 수정<BR>break; //루프 중지<BR>} <BR>} <BR>} <BR>//개선 사항: <BR>//선택한 라디오 버튼을 값으로 수정<BR>function setRadio(name,sRadioValue){ //라디오 이름과 선택한 항목의 값을 전달<BR> var oRadio = document.getElementsByName(name); <BR>for(var i=0;i<oRadio.length;i ) //루프 <BR>{ <BR>if(oRadio[i].value== sRadioValue) //비교값<BR>{ <BR>oRadio[i].checked=true; //선택한 상태 수정<BR>break; //루프 중지<BR>} <BR>} <BR>} <BR>< ;/script> <br><body> <br><form name="frm"> <br><input type="radio" name="oper" value="agree" >동의함 ; /td> <br><input type="radio" name="oper" value="downchange" selected>변경 사항 발생</td><br><input type="radio" name="oper" 값 ="거부">보험 거부</td> <br><input type="radio" name="oper" value="report" >신고</td> <br>[br] <br>경고 ('결과:' getRadio(this.form.oper)) <br><input type="button" name="test1" value="Button1" > <br>[br] <br> 경고('결과 :' getRadio(document.getElementById('oper'))) <br><input type="button" name="test2" value="Button 2" > <br>[br] <br>alert(this .form.oper.value) <br><input type="button" name="test3" value="Button 3" > <br>[br] <br>changeRadio(this.form.oper,"report ") <br><input type="button" name="test4" value="Button 4" > <br>[br][br][br][br] <br>< id=" 선택 slt"> <br><option value="agree" >동의</option> <br><option value="downchange" selected>변경사항 제출</option> <br><option value=" 거부">보험 거부</option> <br><option value="report">신고</option> <br></select> <br>[br ] <br>경고(this. form.slt.value) <br><input type="button" name="test5" value="Button 5" > <br>[br] <br>document.getElementById ('slt')[2] .innerText) <br><input type="button" name="test6" value="Button 6" > <br></form> <br></body> ;<br><br>
</div></u></a></span></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="javascript_javascript 기술 아래 4가지 크로스 브라우저 필수 기능" href="https://m.php.cn/ko/faq/22462.html">javascript_javascript 기술 아래 4가지 크로스 브라우저 필수 기능</a></span><span>다음 기사：<a class="dBlack" title="javascript_javascript 기술 아래 4가지 크로스 브라우저 필수 기능" href="https://m.php.cn/ko/faq/22464.html">javascript_javascript 기술 아래 4가지 크로스 브라우저 필수 기능</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
select.htm 코드 예시는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.