조건부 단순 드롭 다운?

HTML을 사용하여 웹 사이트를 프로그래밍하려고하는데 질문이 있습니다. 옵션 A와 B가있는 드롭 다운 목록을 사용하고 있습니다. 그러나이 중 하나를 선택한 후에는 같은 페이지에서 다른 질문과 함께 다른 드롭 다운 목록과 텍스트 필드를 만들고 싶습니다. 예를 들어 어떤 사람이 A를 선택하면 C와 D라는 질문을 받게되고 누군가 B를 선택하면 E와 F의 질문을 받게됩니다. 이것을 프로그램하는 가장 좋은 방법은 무엇입니까?조건부 단순 드롭 다운?

영어로 된 실수가 있으면 죄송합니다. 원어민이 아닙니다. 그리고 미리 감사드립니다.

출처

2010-12-23 Marcelo

몇 가지 코드를 보여줄 수 있습니까? – ifaour

자바 스크립트가 필요합니다. 대답은 조금 복잡 할 수도 있습니다. – yoda

동적 데이터 (가져온 데이터)가 있으면 http://stackoverflow.com/questions/3637972/whats-the-best-and-easiest-way-to-populate-a-dropdown-based-on-other-dropdown을 확인할 수 있습니다. 데이터베이스에서). 동일한 질문 http : // stackoverflow 내 대답을 확인하십시오.com/questions/3637972/whats-the-best-and-easy-way-to-populate-a-drop-down-another-dropdown/3638893 # 3638893 –

데이터가 정적 (즉, 페이지에 코딩되어 변경되지 않음)인지, 동적 (웹 서버에서 전달 됨)인지에 따라 다릅니다.

드롭 다운 목록에서 목록 A를 기준으로 콘텐츠를 필터링해야하는 경우 원하지 않는 항목을 숨기거나 제거하려면 일부 JavaScript를 사용하는 것이 좋습니다. 사용하기 쉽고 프레임 워크를 이해하기 쉽고 스택 오버플로와 참조 할 수있는 인터넷에서 좋은 예가 많이 있기 때문에 jQuery를 살펴 보겠습니다.

웹 서버에서 데이터를 전달해야하는 경우 (즉, 목록 값을 참조하는 데이터베이스가있는 경우) 프로그래밍 프레임 워크에 대한 자세한 정보 (예 : ASP.Net , PHP 등) 및 목록을 작동시키는 방법 (Ajax, 전체 페이지 다시 게시 등)을 제공합니다.

페이지에 모든 정보가 고정되어 있고 사용자의 선택에 따라 정보가 숨겨져 있다고 가정 해 보겠습니다. 다음과 같이 할 수

<body> 
    <div id="myQuestions"> 
     <select id="QuestionOptions"> 
      <option value="A">Question A</option> 
      <option value="B">Question B</option> 
     </select> 
    </div> 
    <div id="myAnswers"> 
     <div id="A" style="display: none;"> 
      <div id="QuestionC"> 
       <p>Here is an example question C.</p> 
      </div> 
      <div id="QuestionD"> 
       <select id="QuestionOptionsD"> 
        <option value="G">Question G</option> 
        <option value="H">Question H</option> 
       </select> 
      </div> 
     </div> 
     <div id="B" style="display: none;"> 
      <div id="QuestionE"> 
       <p>Here is an example question E.</p> 
      </div> 
      <div id="QuestionF"> 
       <select id="QuestionOptionsF"> 
        <option value="I">Question I</option> 
        <option value="J">Question J</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</body>

자바 스크립트 (위에서 언급 한 바와 같이 내가 jQuery를 사용하고 있습니다) :

귀하의 HTML은 다음과 같이 표시 될 수 있습니다

$(function() { 
    $('#QuestionOptions').change(function() { 
     $('#myAnswers > div').hide(); 
     $('#myAnswers').find('#' + $(this).val()).show(); 
    }); 
});

출처

2010-12-23 19:55:38

안녕하세요, 당신이 대답을 주셔서 감사합니다, 그래서 함수에 대한 코드를 작성해야합니다 부분 안에 함수의 코드를 "스크립트 유형 ="텍스트/자바 스크립트 " 미리 감사드립니다. – Marcelo

필, 매우 깨끗하고 우아한 대답. @Marcelo - 네, 스크립트 태그 안에 넣어야하고 물론 jQuery JS 파일을 포함시켜야합니다. –

@Michiel Kalkman - 칭찬에 감사드립니다. –

숨겨진 드롭 다운을 가지고 첫 번째 드롭 다운의 각 옵션에 해당합니다. 첫 번째 드롭 다운에서 onclick 핸들러를 사용하여 해당 숨겨진 드롭 다운의 숨겨진 속성을 변경합니다.

jQuery가이 문제를 쉽게 해결할 수 있습니다.

출처

2010-12-23 19:57:31 Chetan

** 그의 삶이 더 편해질 것입니다. = P –

javascript appendChild() (예 : Here)을 사용하여 div를 추가하고 어떤 옵션을 선택했는지에 따라 동적으로 div를 추가 할 수 있습니다. 아니면 다른 정적을 선택하고 css로 숨긴 다음 어느 옵션을 선택할지 결정할 수 있습니다.

출처

2010-12-23 19:58:25 Will

질문을 이해하지 못할 수도 있지만 일 수도 있고 일이 지나치게 복잡해질 수 있습니다. 단순히 자바 스크립트가 필요없는 두 개의 질문을 묻는다면, 다른 질문을 가진 두 개의 별도 페이지를 가질 수 있습니다. A ->는 질문 C/D가있는 페이지에 링크하고 B-> E/F에는 링크됩니다.

인터페이스 질문을위한 데모를 게시 할 수도 있습니다 ... 질문을 명확하게 나타낼 수있는 아주 좋은 방법입니다.

출처

2010-12-23 19:59:56

Javascript를 사용하여 사용자 경험 관점에서 양식 요소를 숨기고 표시하는 것보다 덜 바람직 할 수 있습니다. – Chetan

최적은 JavaScript 의존성을 의미합니까? 내가 거기 동의하는지 확실하지 않은. –

조건부 단순 드롭 다운?

답변

관련 문제