具有动态的jQuery添加/删除

Question

我是jQuery的新手，我正在努力实现这一点：

在我的PHP页面中，我想做一些事情，比如Add/Remove按钮/图标(请检查：http://muiomuio.com/tutorials/jquery/add-remove/ http://muiomuio.com/web-design/add-remove-items-with-jquery)，当单击add时，我想显示一组新的字段(特别是下拉菜单)。在我上面显示的示例中，它只有一个文本字段。

但是，这些不是正常的字段，我希望用数据库中的值填充它们，其中一些需要是交互式的。换句话说，AJAX启用了。因此，在我的PHP页面中，我想做一个查询来处理这些交互的部分。

更确切地说，让我们把这个“新”项目称为一行。一行包含：

服务：下拉菜单(静态，每次创建新项目行时不需要调用数据库)

商店：下拉菜单(dynamic，它将检查服务下拉菜单，并根据其值从数据库中获取提供此服务的商店)

状态：下拉菜单(静态，每次创建新项目行时不需要调用数据库)

现在，从这个简单的演示中，我知道了如何进行添加/删除功能，但我不知道如何进行数据库调用来获取下拉菜单的值。另外，我不知道如何制作动态"Store“列表，它接受行的”服务“菜单的值。

因此，如果我们有10行，那么每个行都有自己的服务，而在row1中更改服务只会影响行1的存储列表值。以此类推。所以它们是分开的行。

请帮助我们如何瞄准这个目标。谢谢!

Answer 1

好的，我假设您已经添加和删除了所有的排序，但是，看看您的代码，看看您是否以某种方式实现它，每个新项都有唯一的标识，例如：

<select id="service-1">.....</select>
<select id="store-1">......</select>
<select id="status-1">.....</select>

<select id="service-2">.....</select>
<select id="store-2">......</select>
<select id="status-2">.....</select>

现在是Javascript。基本上，您必须告诉jQuery，当onChange事件发生在服务复选框中时，它必须找出它的标识符，从服务器请求数据，并将元素中的内容替换为您刚才使用的id store +标识符。

$('select[id^="service-"]').change(function(){
   var id = $(this).attr('id');
   id = id.replace('service-', '');

   var someValue = $(this).val();

   $.get('/fetch/content/from/this/url?param='+someValue, function(data){
       $('#store-' + id).html(data);    // that would be if your script returns HTML.
                                        //  You can easily alter the functionality to 
                                        // rebuild the dropdown menu from JSON object
                                        // or something like that 
   });                               
});

基本上就是这样。:)

哦，如果它不起作用，请告诉我，可能有一些操纵，我忘了。我没有测试它，但我使用了这个方法10亿次，所以它肯定能做到。

Answer 2

虽然我不喜欢推荐这一点，但你最好的选择可能是预先填充的田地。用PHP构建下拉菜单，然后用jQuery隐藏它们。如果他们没有太多，就不应该有一个巨大的表现。

除非我误解了你的问题，否则我认为这是最简单的解决办法。

Answer 3

在会话中存储值不是最好的吗？然后，在创建一个新字段时，您只需要调用会话变量？你只能调用一个数据库和内存中的所有数据.