2013-11-10 2 views
0

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

enter image description here

+0

Я думаю, что лучше делать это с помощью javascript на стороне клиента. Здесь нет необходимости тянуть что-либо с сервера. Создавайте/копируем нужные элементы – lvil

+0

@Ivil Хорошо, я буду следовать советам. Вопрос в том, как это делается? –

ответ

2

Это делается с помощью Java Script, и здесь намек

создать DIV и положить исходные данные, которые вы хотите внутри него

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

и использовать событие изменения JQuery вы можете перебирать вид элементов управления DIV

т.е. если у вас есть DIV с идентификатором контейнера, в котором вы будете размещать новые элементы управления

$('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 код

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

Смежные вопросы