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

使用onchange事件更新您的父级，在javascript中调用我们创建的函数updateChild（）。

<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事件，因此它在元素更改时执行。

Answer 2

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

希望这是我理解的答案。

我在子选择框中更改/加载内容，具体取决于使用html的父选择框选项

2 个答案: