집 > 기사 > 웹 프론트엔드 > 자바스크립트 연산 선택 element_javascript 스킬 분석 예시

자바스크립트 연산 선택 element_javascript 스킬 분석 예시

WBOY원래의: 2016-05-16 16:07:17918검색

이 기사의 예에서는 javascript를 사용하여 select 요소를 작동하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

여기서 select 요소에 대한 js의 작동에 대해 알아보겠습니다. html 페이지에 select 요소와 제출 버튼이 포함된 양식을 만듭니다.

select의 항목이 선택되면 텍스트를 변경하고, select의 모든 항목의 텍스트가 변경되면 복원합니다.

제출을 누르면 창 자체가 닫힙니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<title>duang for select elements</title>
<script type="text/javascript">
 function do_change(elt){
  var text = elt[elt.selectedIndex].innerHTML;
  if(!text.match(/\[/))
   elt[elt.selectedIndex].innerHTML += " [duang]";
  var is_all_seleted = true;
  for(var i=0;i<elt.length;++i){
   if(!elt[i].innerHTML.match(/\[/)){
    is_all_seleted = false;
    break;
   }
  }
  if(is_all_seleted){
   alert("all duang!!!\nand reset it!!!");
   for(var i=0;i<elt.length;++i){
    elt[i].innerHTML = elt[i].innerHTML.replace(/\s\[.*\]/,"")
   }
  }
 }
</script>
</head>
<body>
 <form id="frm_main" action="#" method="post">
  <select id="slt" onchange="do_change(this);">
   <option value="opt_1">opt A</option>
   <option value="opt_2">opt B</option>
   <option value="opt_3">opt C</option>
   <option value="opt_4">opt D</option>
   <option value="opt_5">opt E</option>
  </select>
  <input type="submit" value="close window" onclick="window.close();"/>
 </form>
</body>
</html>

Firefox에서는 처음에는 창 자체를 닫을 수 없는 것 같았는데, 나중에 about:config에서 dom.allow_scripts_to_close_windows를 설정하면 true로 설정할 수 있다는 것을 알게 되었습니다.

각 선택 항목의 옵션이 불규칙하게 변경되는 경우 on_change_ex를 작성하여 처리할 수 있습니다.

function do_change_ex(me){
  var text = me[me.selectedIndex].innerHTML;
  if(!text.match(/\[/)){
   me[me.selectedIndex].text_bak = me[me.selectedIndex].innerHTML;
   me[me.selectedIndex].innerHTML += " [duang]";
   me[me.selectedIndex].is_changed = true;
  }
  var is_all_seleted = true;
  for(var i=0;i<me.length;++i){
   if(!me[i].is_changed){
    is_all_seleted = false;
    break;
   }
  }
  if(is_all_seleted){
   alert("all duang!!!\nand reset it!!!");
   for(var i=0;i<me.length;++i){
    me[i].innerHTML = me[i].text_bak;
    me[i].is_changed = false;
   }
  }
}

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript 패키징 개체 인스턴스 분석_javascript 기술다음 기사：JavaScript 패키징 개체 인스턴스 분석_javascript 기술

자바스크립트 연산 선택 element_javascript 스킬 분석 예시

관련 기사