html - 我更改/加载子选择框中的内容，具体取决于使用 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>

据我所知，希望这是对您问题的回答。