콤보 상자 선택에 따라 HTML 레이아웃을 변경하십시오.

Question

사용자가 xml 파일을 쿼리 할 수 ​​있도록 HTML 웹 페이지를 디자인했습니다. 기본적으로 쿼리 할 열과 검색 유형을 선택한 다음 값을 입력합니다. 그러나 콤보 상자에서 선택하면 첫 번째 텍스트 입력 상자 다음에 & 레이블이 표시되고 다른 입력 상자가 나타납니다.

현재 코드

은 다음과 같습니다 :

<form name="myform" action="podcatalog.xml" method="POST"> 
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')"> 
<option value="author">Author</option> 
<option value="title">Title</option> 
<option value="pages">Pages</option> 
<option value="year">Year</option> 
</select> 

<select id="ddl2" onchange="configureTextFields(this, 'querystring')"> 
</select> 

<input type="text" name="querystring"/> 

<input type="submit" value="Search"/> 

</form> 

<script type="text/javascript"> 
function configureDropDownLists(ddl1,ddl2) { 
    var string = new Array('Contains', 'Equals'); 
    var number = new Array('=', '<', '>', 'Between', '!='); 

    switch (ddl1.value) { 
     case 'author': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < string.length; i++) { 
       createOption(document.getElementById(ddl2), string[i], string[i]); 
      } 
      break; 

     case 'title': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < string.length; i++) { 
       createOption(document.getElementById(ddl2), string[i], string[i]); 
      } 
      break; 

     case 'pages': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < number.length; i++) { 
       createOption(document.getElementById(ddl2), number[i], number[i]); 
      } 
      break; 

     case 'year': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < number.length; i++) { 
       createOption(document.getElementById(ddl2), number[i], number[i]); 
      } 
      break; 

      default: 
       document.getElementById(ddl2).options.length = 0; 
      break; 
    } 

} 

function createOption(ddl, text, value) { 
    var opt = document.createElement('option'); 
    opt.value = value; 
    opt.text = text; 
    ddl.options.add(opt); 
} 

function configureTextFields(ddl2) { 
    switch (ddl2.value) { 
     case 'Between': 

     // Need code here? 

Answer 1

당신은 사업부를 숨길 그것에 CSS 클래스와 함께 첫 번째 입력 상자 후 사업부를 추가해야합니다. 그런 다음 선택한 항목이 그 사이에있는 경우 configureTextFields(this, 'querystring')이 실행되면 자바 스크립트를 사용하여 CSS 클래스를 제거합니다.

개인적으로 jquery를 사용하는 방법을 살펴 보는 것이 좋습니다. 다음은 비슷한 일을하는 다른 포럼의 스레드입니다.

http://www.webdeveloper.com/forum/showthread.php?t=194923

당신이 그것을 확인하는 것이 좋습니다 jQuery로 당신의 익숙하지 않은 경우, 그것은 당신의 인생을 훨씬 쉽게 만들 수 있습니다. http://jquery.com/