Я изменяю/загружаю содержимое в дочернем элементе. Выберите поле, в зависимости от родительского. Выберите опцию «Выбор» с помощью html.

Question

.

. Я использую код ниже, и я не знаю, как заставить его изменять/загружать контент в дочернем поле. Выберите «Коробка», в зависимости от параметры родительского Select Box

<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> 

И я не знаю, как сделать это изменить/загрузить содержимое в детской Select Box, в зависимости от родителя опций Выберите Box? Не могли бы вы помочь мне ...

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

обновите родителя с помощью события onchange, вызвав нашу созданную функцию updateChild() в javascript.

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

написать эту функцию в Javascript

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

Эта функция просто принимает значение от родителей и устанавливает в ребенке соответственно значению родителей и, как мы назвали его OnChange событием, так что выполняется на изменении элемента ,