使用CakePHP动态添加选择输入

Question

当用户添加事件时，他们需要能够将“band”表中的band添加到事件中。它已经全部通过HABTM进行设置，并且在将多个选择框硬编码到页面时，我可以使用它。

问题是 - 我想只有一个选择框，然后是“添加另一个乐队”按钮 - 这将添加另一个选择输入与乐队列表 - 等等 - 尽可能多的他们会喜欢。

我发现这个职位：Add and remove form fields in Cakephp它解释了如何动态添加一个字段...我的问题是，乐队列表是巨大的，并定期更改，所以我无法想象这对我工作。

任何关于这方面的最佳途径的想法？ - 动态地添加一个选择输入，并使用我的数据库中的乐队列表进行填充？ Ajax可能吗？ （我不知道如何用蛋糕做Ajax）Ajax似乎没问题，但是我真的想在每次用户点击“添加乐队”按钮时拉出乐队列表吗？也许没关系？

任何帮助/方向非常感谢。代码示例很棒，但如果没有其他的话，向正确的方向推动将会非常有帮助。

Answer 1

您可以使用单个选择输入和“添加乐队”按钮。当用户点击“添加乐队”时，使用javascript捕捉事件，将选定的乐队复制到列表中（直观地），并将该ID添加到隐藏输入（在提交表单时使用）。下面的jQuery/CakePHP示例。

<ul id='band_list'></ul> 
<?php echo $form->create('Event', array('id'=>'event_form'));?> 
<?php echo $form->input('band_ids', array('type'=>'hidden', 'id'=>'band_ids')); ?> 
<?php echo $form->input('bands', array('type'=>'select', 'options'=>$bands, 'id'=>'bands_selector')); ?> 
<button id='add_band'>Add Band</button> 

<script type='text/javascript'> 
    var band_count = 0; 
    $('#add_band').click(function(event) { 
     event.preventDefault(); 
     $('<li>' + $('#bands_selector option:selected').text() + '</li>').appendTo('#band_list'); 
     $('<input type="hidden" name="data[Band][Band]['+band_count.toString()+']" value="'+$("#bands_selector option:selected").val()+'">').appendTo('#event_form'); 
     band_count++; 
    }); 
</script>