Условные выпадающие меню

Я хочу создать форму, в которой параметры меняются в зависимости от выбора.

например Если они выберут "Chevrolet" в первом раскрывающемся меню, в следующем варианте будут показаны только модели Chevrolet. Затем, в зависимости от этого выбора, размеры двигателя для этой модели являются единственными доступными вариантами. Как мне это сделать с помощью JavaScript и PHP?


javascript php forms cascadingdropdown
person Martin Dotson    schedule 15.04.2013    source источник
comment
Здесь вы можете получить некоторые идеи: stackoverflow.com/questions/3345630/   -  person karthikr    schedule 15.04.2013
comment
Вы можете сделать это, используя только CSS и html, используя простое многоуровневое всплывающее меню. Есть и другие варианты.   -  person Supplement    schedule 15.04.2013

Ответы (2)


arrow_upward
1
arrow_downward

Раскрывающееся/всплывающее меню любой ширины с действием щелчка по центру

Он jsfiddle, который может выполнить то, что вы ищете:

Нажмите на курорт или информацию, и вы увидите другие всплывающие окна.

jsfiddle.net/дополнение/UYBDm/

скопируйте и вставьте jsfiddle в свой браузер.

person Supplement    schedule 15.04.2013

arrow_upward
0
arrow_downward

В свой HTML обязательно включите jQuery. Я предполагаю, что вы будете использовать более сложную версию следующего:

<label>Make</label>
<select id="makes">
</select>
<br/>
<label>Model</label>
<select id="models">
</select>

Вот один из способов сделать это для JavaScript. Вы, очевидно, захотите значительно улучшить его в зависимости от ваших требований и того, как вы решите выразить данные о своей марке / модели.

$(document).ready(function(){
    // If this list is to come from a database
    // or some other dynamic source, use PHP to
    // populate it here.
    // Feel free to format this some other way.
    // Just change the jQuery parts accordingly.
    var cars = [{"make": "Chevrolet", "models": ["Camaro", "Impala", "Volt"]}, {"make": "Honda", "models": ["Accord", "Civic", "CRV"]}];

    for (var i=0; i < cars.length; i++){
      var make = cars[i].make;        
      // Make this different if needed
      var makeval = make;
      $("#makes").append(new Option(makeval, make));
    }

    var buildModels = function(){
        // Clear current list
        $("#models option").remove();

        var selectedMake = $("#makes :selected").val();
        for (var i=0; i < cars.length; i++){
            if(selectedMake == cars[i].make){
                var models = cars[i].models;
                for (var j=0; j < models.length; j++){
                      var model = models[j];        
                      var modelval = model;
                      $("#models").append(new Option(modelval, model));
                }
                break;
            }
        }
    };

    $("#makes option").find(':first').attr('selected','selected');
    buildModels();

    $("#makes").change(function(){
        buildModels();
    });
});
person UtopiaLtd    schedule 15.04.2013