>

html 웹 페이지에 드롭 다운 메뉴가 있습니다. 사용자가 드롭 다운에서 값을 선택할 때 후속 드롭 다운을 표시하고 싶습니다. 예 : 드롭 다운 1 선택 값 1>표시 드롭 다운 2. 드롭 다운 1 선택 값 2>표시 드롭 다운 3

아래 코드에 거의 다 있다고 생각합니다. 세 개의 드롭 다운이 있고 처음에는 첫 번째 만 표시됩니다. 그러나 클라이언트 1을 선택한 경우 드롭 다운 클라이언트 1을 표시하도록 설정하고 클라이언트 2를 선택한 경우 드롭 다운 클라이언트 2를 표시하도록 설정하려면 if 문을 지정해야한다고 생각합니다.

나는 if 를 시도했다  진술하지만 작동시킬 수 없습니다. 최소한 일종의 구문 오류가 예상되거나 내가 시도한 내용이 내가 접근 한 방식으로 작동하지 않습니다.

var elem = document.getElementById("client");
var strUser = e.options[e.selectedIndex].value;
if (strUser.value == "Client 1");
elem.onchange = function() {
  var hiddenDiv = document.getElementById("client1");
  hiddenDiv.style.display = (this.value == "") ? "none" : "block";
};
else
  elem.onchange = function() {
    var hiddenDiv = document.getElementById("client2");
    hiddenDiv.style.display = (this.value == "") ? "none" : "block";
  };

<select class="default" id="client" name="client">
  <option value="" selected>Select Client</option>
  <option value="1">Nike</option>
  <option value="2">Adidas</option>
</select>
<select class="default" id="Nike_group" name="Nike_group" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">Zoom</option>
  <option value="2">Vapour</option>
</select>
<select class="default" id=Adidas_style" name="adidas_style" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">Running</option>
  <option value="2">Football</option>
<option value="3">Rugby</option>
</select>
<select class="default" id=Adidas_rugby" name="adidas_rugby" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">England</option>
  <option value="2">France</option>
  <option value="3">Wales</option>
</select>
<select class="default" id=Adidas_football" name="adidas_rugby" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">Man UTD</option>
  <option value="2">Chelsea</option>
  <option value="3">Everton</option>
</select>


  • 답변 # 1

    이 작업을 수행하려는 것으로 가정합니다

    다른 선택을 숨기려고 반복합니다

    document.getElementById("client").addEventListener("change", function() {
      var strUser = this.value;
      [...document.querySelectorAll(".default")].forEach(sel => {
        if (sel.id !== "client") { // don't hide the main select
          sel.style.display = sel.id === "client" + strUser ? "block" : "none"
        }
      })
    })
    
    
    <select class="default" id="client" name="client">
      <option value="" selected>Select Client</option>
      <option value="1">client 1</option>
      <option value="2">client 2</option>
    </select>
    <select class="default" id="client1" name="client1" style="display: none;">
      <option value="" selected>Select option Client 1</option>
      <option value="1">option a</option>
      <option value="2">option b</option>
    </select>
    <select class="default" id="client2" name="client2" style="display: none;">
      <option value="" selected>Select option Client 2</option>
      <option value="1">option one</option>
      <option value="2">option two</option>
    </select>
    
    

관련 자료

  • 이전 자바 스크립트에서 배열에서 반복 요소를 찾는 모든 방법은 무엇입니까
  • 다음 php - errorexception (e_notice) 정의되지 않은 변수 - actuallabels