javascript - 通过php动态下拉菜单

Question

几周前我访问了一个网站，发现了一个动态下拉菜单。我遇到了一个我现在正在尝试复制但不知道如何复制的功能。在下拉列表中，您选择了所需的汽车数量，然后根据选择的汽车数量重复输入字段。我相信这是通过 javascript 完成的，并且涉及到一个循环。这个动作或显示事物的方式是否有术语？还有一个如何完成类似事情的例子会有所帮助吗？

Answer 1

这不太可能用 PHP 完成，因为这需要刷新页面。更有可能通过 Javascript 监听 Select 元素的 onChange 事件（下拉菜单）来完成。当检测到事件时，Javascript 可以显示/隐藏 div 元素（每个 Car 一个），或动态创建/销毁它们。

Answer 2

这是使用 java 脚本完成的，这里有一个提示

创建一个 div 并将所需的输入放入其中

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

并使用 jQuery 更改事件，您可以迭代控件 div 的视图

即，如果您有一个带有 id 容器的 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');
  }
});

请增强此代码以满足您的要求。

Answer 3

如果你想要它不刷新，你需要使用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/