Я посетил веб-сайт несколько недель назад и столкнулся с динамическим выпадающим меню. Я наткнулся на функциональность, которую я сейчас пытаюсь воспроизвести, но не знаю, как это сделать. В выпадающем меню вы выбрали нужное количество автомобилей, а затем подтвердили поля ввода в соответствии с количеством выбранных автомобилей. Я считаю, что это было сделано через javascript, и был задействован цикл. Есть ли термин для этого действия или способ отображения вещей? Также поможет пример того, как выполнить что-то подобное?
Это делается с использованием 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');
}
});
Пожалуйста, улучшите этот код в соответствии с вашими требованиями.
Маловероятно, что это будет сделано с PHP, поскольку для этого потребуется обновление страницы. Скорее всего, это будет сделано при прослушивании Javascript события onChange элемента Select (выпадающего меню). Когда событие обнаружено, Javascript может отображать/скрывать элементы div (по одному для каждого автомобиля) или динамически создавать/уничтожать их.
Если вы хотите его без обновления, вам нужно использовать 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/