В php: значения раскрывающегося списка зависят от другого раскрывающегося списка в той же форме

Question

Как я могу реализовать это решение? Значения раскрывающегося списка зависят от другого раскрывающегося списка в той же форме например : форма содержит выпадающий список (car_name), выпадающий список (модели этого автомобиля), кнопка (поиск) заметить, что : 1) значения car_model зависят от значения car_name 2) выпадающий список car_name и выпадающий список car_model в одной форме

спасибо С наилучшими пожеланиями.

Answer 1

<form> <select id="car_name">
    <option value="car1">Car 1</option>
    <option value="car2">Car 2</option>
    <option value="car3">Car 3</option> </select> <select id="car_model"> </select> </form> <script type="text/javascript"> // Maps all available car models var modelMap = {
    'car1': [
        // Each entry contains the model's ID and text/label.
        ['car1-1', 'Car 1.1'],
        ['car1-2', 'Car 1.2'],
        ['car1-3', 'Car 1.3']
    ],
    'car2': [
        ['car2-1', 'Car 2.1'],
        ['car2-3', 'Car 2.2']
    ],
    'car3': [
        ['car3-1', 'Car 3.1'],
        ['car3-2', 'Car 3.2'],
        ['car3-3', 'Car 3.3'],
        ['car3-4', 'Car 3.4'],
        ['car3-5', 'Car 3.5']
    ] };

// Get the dropdown list elements.
var nameList = document.getElementById('car_name');
var modelList = document.getElementById('car_model');

// Function to be called when the car name is changed 
nameList.onchange = function() {
    // Get the selected car.
    var selectedName = nameList.options[nameList.options.selectedIndex].value;
    // Lookup available models in the map.
    var availModels = modelMap[selectedName] || [];

    var i, opt;

    // Set available models in the model dropdown.
    for (i = 0; i < availModels.length; ++i) {
        opt = availModels[i];
        modelList.options[i] = new Option(opt[0], opt[1]);
    }

    // Remove all old options if the new car has fewer models than a previous selection.
    for (; i < modelList.options.length; ++i) {
        modelList.options[i] = null;
    } }; </script>

Это правильно, но свойство длины "modelList" необходимо сбросить на ноль. Так вот так.

 for (; i < modelList.options.length; ++i) {
     modelList.options[i] = null;
     modelList.length = 0;
 } }; </script>

Answer 2

Вот правильный код, который удаляет отсутствующую модель для списка автомобилей:

<form>
<select id="car_name">
<option value="car1">Car 1</option>
<option value="car2">Car 2</option>
<option value="car3">Car 3</option>
</select>
<select id="car_model">
</select>
</form>
<script type="text/javascript">
// Maps all available car models
var modelMap = {
'car1': [
    // Each entry contains the model's ID and text/label.
    ['car1-1', 'Car 1.1'],
    ['car1-2', 'Car 1.2'],
    ['car1-3', 'Car 1.3']
],
'car2': [
    ['car2-1', 'Car 2.1'],
    ['car2-3', 'Car 2.2']
],
'car3': [
    ['car3-1', 'Car 3.1'],
    ['car3-2', 'Car 3.2'],
    ['car3-3', 'Car 3.3'],
    ['car3-4', 'Car 3.4'],
    ['car3-5', 'Car 3.5']
]
};

// Get the dropdown list elements.
var nameList = document.getElementById('car_name');
var modelList = document.getElementById('car_model');

// Function to be called when the car name is changed
nameList.onchange = function() {

// Remove all old options if the new car has fewer models than a previous selection.
for(i=modelList.options.length-1;i>=0;i--)
{
    modelList.remove(i);
}   

// Get the selected car.
var selectedName = nameList.options[nameList.options.selectedIndex].value;
// Lookup available models in the map.
var availModels = modelMap[selectedName] || [];

var i, opt;

// Set available models in the model dropdown.
for (i = 0; i < availModels.length; ++i) {
    opt = availModels[i];
    modelList.options[i] = new Option(opt[0], opt[1]);
}

};
</script>

Answer 3

<form>
<select id="car_name">
    <option value="car1">Car 1</option>
    <option value="car2">Car 2</option>
    <option value="car3">Car 3</option>
</select>
<select id="car_model">
</select>
</form>
<script type="text/javascript">
// Maps all available car models
var modelMap = {
    'car1': [
        // Each entry contains the model's ID and text/label.
        ['car1-1', 'Car 1.1'],
        ['car1-2', 'Car 1.2'],
        ['car1-3', 'Car 1.3']
    ],
    'car2': [
        ['car2-1', 'Car 2.1'],
        ['car2-3', 'Car 2.2']
    ],
    'car3': [
        ['car3-1', 'Car 3.1'],
        ['car3-2', 'Car 3.2'],
        ['car3-3', 'Car 3.3'],
        ['car3-4', 'Car 3.4'],
        ['car3-5', 'Car 3.5']
    ]
};

// Get the dropdown list elements.
var nameList = document.getElementById('car_name');
var modelList = document.getElementById('car_model');

// Function to be called when the car name is changed
nameList.onchange = function() {
    // Get the selected car.
    var selectedName = nameList.options[nameList.options.selectedIndex].value;
    // Lookup available models in the map.
    var availModels = modelMap[selectedName] || [];

    var i, opt;

    // Set available models in the model dropdown.
    for (i = 0; i < availModels.length; ++i) {
        opt = availModels[i];
        modelList.options[i] = new Option(opt[0], opt[1]);
    }

    // Remove all old options if the new car has fewer models than a previous selection.
    for (; i < modelList.options.length; ++i) {
        modelList.options[i] = null;
    }
};
</script>