1

我正在使用以下代码，但我不知道如何更改/加载子选择框中的内容，具体取决于父选择框选项

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

而且我不知道如何根据父选择框选项更改/加载子选择框中的内容？请你帮助我好吗...

4

2 回答 2

0

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

于 2013-10-27T23:11:30.530 回答
0 
    <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>

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

于 2013-10-27T23:56:11.073 回答