2011-12-20 2 views
2

2 행을 연속적으로 드롭 다운하는 아주 간단한 응용 프로그램을 작성해야합니다. 2를 선택하면 간단한 함수가 2 개의 값을 연결하고 내가 할 노력하고있어함수를 실행 한 후 페이지를 새로 고침을 중지하십시오.

dropdown1 dropdown2 Output

이며, 두 번째 드롭 다운 값은 함수 실행을 선택하고 output을 말한다 출력을 표시되면 : 출력과 같이 그 옆에. 그러나 현재, 출력은 새로운 창에 표시됩니다.

<form> 
<select id="test"> 
<option>Arena/Quantum Barcelona LTBC</option> 
<option>Arena/Quantum Spain LTES</option> 
</select> 

<select id="name" onchange="tryThis()"> 
<option>Name</option> 
<option>Name1</option> 
</select> 

</form> 

자바 스크립트 : 여기

는 지금까지 (HTML)이 무엇

function tryThis() { 

var string, string1 = ''; 

var e = document.getElementById("test"); 
string = e.options[e.selectedIndex].text; 

var a = document.getElementById("name"); 
string1 = a.options[a.selectedIndex].text; 
document.write(string+'_'+string1); 
} 

하는 나는 그것이 필요 이상이 더 어렵게 만드는 중이을?!

+0

새 요소를 만들거나 기존 요소의 내용을 설정하십시오. 'document.write'는 당신의 페이지를 쓸어 버릴 것입니다. JS 라이브러리를 사용하면 모든 것을 더 쉽게 할 수 있습니다. –

답변

3

뭔가 표시하기 전에 document.write 페이지를 지우기 때문입니다. 이 기능을 사용할 필요가 없습니다.

대신, 예 : 몸은 :

document.body.appendChild(
    document.createTextNode(string + '_' + string2) 
); 
+0

감사합니다. – zik

1

당신은 당신의 JS 기능이 좋은 대안이 추가되어 tryThis()라고하고 이벤트 핸들러는 그러나 귀하의 경우에는 내가 document.write을 사용 자제 것 tryThsis()

를 호출하는 것으로 나타났습니다 DIV가 있고 그 DIV의 innerHTML을 변경하십시오

+0

그래, 미안해, 그건 내가 바보가되어 버렸어.하지만 이걸 고쳐 놨어. :) – zik

0

먼저 액세스하기 쉬운 양식에 ID를 입력하십시오.

var a = (function() { 
    var myForm = document.getElementById("myForm"), 
     magic = function() { 
      var a = myForm.getElementsByTagName("select"), 
       b, 
       c = []; 
      for (b = a.length - 1; b > -1; b -= 1) { 
       c.push(a[b].value); 
      } 
      alert(c.join(" ") + " output"); 
     }; 
    myForm.onclick = magic; 
}()); 

당신은 여분의 "출력"이 있어야하는데 무엇이나 방법은 데이터가 반환 원하는 특정 아니었지만, 여기 당신은 간다. 경고를 사용하는 대신 결과를 다른 양식 요소의 값으로 푸시 할 수 있습니다. document.write은 지연시킬 수 없으므로 사용하지 마십시오. document.write 작업을 연기하려고 시도하면 현재 페이지의 본문 내용 전체가 대체됩니다.

관련 문제