Динамическое выпадающее меню через php

0

Я посетил веб-сайт несколько недель назад и столкнулся с динамическим выпадающим меню. Я наткнулся на функциональность, которую я сейчас пытаюсь воспроизвести, но не знаю, как это сделать. В выпадающем меню вы выбрали нужное количество автомобилей, а затем подтвердили поля ввода в соответствии с количеством выбранных автомобилей. Я считаю, что это было сделано через javascript, и был задействован цикл. Есть ли термин для этого действия или способ отображения вещей? Также поможет пример того, как выполнить что-то подобное?

Изображение 174551

  • 0
    Я думаю, что лучше делать с JavaScript на стороне клиента. Здесь не нужно ничего вытаскивать с сервера. Только создавать / копировать необходимые элементы
  • 0
    @Ivil Хорошо, я последую совету. Вопрос в том, как это сделать?
Теги:

3 ответа

2
Лучший ответ

Это делается с использованием java-скрипта, и здесь намек

создайте div и поместите входы, которые вы хотите внутри

<div id='controls'>
<input type="text" name="car_name" />
</div>

и с помощью события изменения jQuery вы можете повторить просмотр элементов управления div

т.е. если у вас есть div с контейнером id, где вы разместите новые элементы управления

$('select').change(function(){
 var number = parseInt ($(this).val ());
 //And do for loop here
 for (var i=1;i<=number;i++){
     $('#controls').clone().appendTo($('#container');
  }
});

Пожалуйста, улучшите этот код в соответствии с вашими требованиями.

2

Маловероятно, что это будет сделано с PHP, поскольку для этого потребуется обновление страницы. Скорее всего, это будет сделано при прослушивании Javascript события onChange элемента Select (выпадающего меню). Когда событие обнаружено, Javascript может отображать/скрывать элементы div (по одному для каждого автомобиля) или динамически создавать/уничтожать их.

0

Если вы хотите его без обновления, вам нужно использовать javascript, я сделал один пример здесь, используя jquery: HTML CODE

<label>How many cars?</label>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="fields"></div>

КОД JAVASCRIPT

$('select').change(function() {
    var option = $(this).val();
    showFields(option);
    return false;
});
function showFields(option){
    var content = '';
    for (var i = 1; i <= option; i++){
        content += '<div id="field_'+i+'"><label>Car '+i+'</label><br /><label>Model:</label> <input id="model_'+i+'" /><br /><label>Maker:</label> <input id="maker_'+i+'" /><br /><label>Year:</label> <input id="year_'+i+'" /><br /><div><br />';
    }
    $('#fields').html(content);
}

Вот пример: http://jsfiddle.net/zbzjm/1/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню