상위 셀에 따라 하위 선택 상자의 내용을 변경 /로드합니다. html을 사용하는 선택 상자 옵션

Question

아래 코드를 사용하고 있으며 하위 선택 상자의 내용을 하위 선택 상자에로드하는 방법을 모르겠습니다. 부모 선택 상자 옵션

<div class="middle_row row_white search_row"> 

    <div class="container"> 
     <form action="#" class="search_form advsearch_hide clearfix"> 
      <div class="row field_select"> 
       <label class="label_title">Select Product:</label> 
       <select name="car_maker" class="select_styled"> 
        <option value="0" class="default">- SELECT -</option> 
        <option value="1">Automatic Filling Lines</option> 
        <option value="2">Packaging Machines for Food industries &amp; Bakaries</option> 
        <option value="3">Automatic Vertical Packaging Machines</option> 
        <option value="4">Vacuum Machines</option> 
        <option value="5">Gluing Machines</option> 
        <option value="6">Automatic Shrink Wrapping</option> 
        <option value="7">Automatic Cup Filling &amp; Sealing Machines</option> 
        <option value="8">Banding Machines</option> 
        <option value="9">Packaging Materials</option>      
         </select> 
      </div> 

      <div class="row field_select"> 
       <label class="label_title">Select Category:</label> 
       <select class="select_styled" name="car_model"> 
        <option value="0" class="default">- SELECT -</option> 
        <option value="1">Category1</option> 
        <option value="2">Category2</option> 
        <option value="3">Category3</option> 
        <option value="4">Category4</option> 
        <option value="5">Category5</option> 
        <option value="6">Category6</option>                      
       </select> 
      </div> 

      <div class="row field_select"> 
       <label class="label_title">Select Model:</label> 
       <select class="select_styled" name="car_year"> 
        <option value="0" class="default">- SELECT -</option> 
        <option value="1">Model1</option> 
        <option value="2">Model2</option> 
        <option value="3">Model3</option> 
        <option value="4">Model4</option> 
        <option value="5">Model5</option> 
        <option value="6">Model6</option>             
       </select> 
      </div> 

그리고 나는 그것이 변경/부모 선택 상자의 옵션에 따라 아이 선택 상자에서 내용을로드하는 방법을 몰라? 도와 주시겠습니까 ...

Answer 1

<div class="row field_select"> 
     <label class="label_title">Select Product:</label> 
     <select id="car_maker" class="select_styled" onchange="updateChild()"> 
      <option value="0" class="default">- SELECT -</option> 
      <option value="1">Automatic Filling Lines</option> 
      <option value="2">Packaging Machines for Food industries &amp; Bakaries</option> 
      <option value="3">Automatic Vertical Packaging Machines</option> 
      <option value="4">Vacuum Machines</option> 
      <option value="5">Gluing Machines</option> 
      <option value="6">Automatic Shrink Wrapping</option>     
     </select> 
    </div> 

    <div class="row field_select"> 
     <label class="label_title">Select Category:</label> 
     <select class="select_styled" id="car_model" onchange="updateSubChild()"> 
      <option value="0" class="default">- SELECT -</option> 
      <option value="1">Category1</option> 
      <option value="2">Category2</option> 
      <option value="3">Category3</option> 
      <option value="4">Category4</option> 
      <option value="5">Category5</option> 
      <option value="6">Category6</option>                      
     </select> 
    </div> 

    <div class="row field_select"> 
     <label class="label_title">Select Model:</label> 
     <select class="select_styled" id="car_year"> 
      <option value="0" class="default">- SELECT -</option> 
      <option value="1">Model1</option> 
      <option value="2">Model2</option> 
      <option value="3">Model3</option> 
      <option value="4">Model4</option> 
      <option value="5">Model5</option> 
      <option value="6">Model6</option>             
     </select> 
    </div> 
</div> 

<script type="text/javascript"> 
function updateChild() 
{ 
    document.getElementById('car_model').value = document.getElementById('car_maker').value; 
      document.getElementById('car_year').value = document.getElementById('car_maker').value; 
} 
</script> 

희망 사항은 내가 이해하는 한 귀하의 질문에 대한 답변입니다.

Answer 2

javascript에서 생성 된 함수 updateChild()를 호출하는 onchange 이벤트로 부모를 업데이트하십시오.

<select class="select_styled" name="car_model" onchange="updateChild()"> 

쓰기 자바 스크립트에서이 기능

<script type="text/javascript"> 
function updateChild() 
{ 
    document.getElementsByName('car_year').value = document.getElementsByName('car_model').value; 
} 
</script> 

이 기능은 단순히 따라 부모의 값으로하고 요소의 변화에 ​​실행, 그래서 우리가 onchange를 이벤트를 불렀다로 부모와 자식 세트의 값을 .