不同的结果来自同一领域

Question

这里我使用Dynamic-Form-Element-Creation-And-Deletion-Plugin-Addel 插入更多值及其工作，但这里面临的问题是当我从 addel 使用的选择框中选择一个值时，相应的数据将出现在相应的框中，如果我选择另一个选择通过单击添加按钮框，相应的值出现在第一个字段中，而不是相应的字段中。 这是我的看法

<div class="form-group ">
         <label class="col-lg-3 control-label">Select Tools<span
                            class="required">*</span></label>
            <div class="col-lg-6">

             <div class="addel">

                 <div class="form-group target">
                    <div class="input-group">
                        <div class="col-lg-6"> <select class="form-control tools" style="width: 100%" name="tool_id[]" id="tools" onchange="tool(this)"  required>
                        <option value="">Select</option>

                    </select></div>

                     <div class="col-lg-3">  
                  <input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
                  </div>
                  <div class="col-lg-3" id="avail">  
                  <input type="text" class="form-control" name="available" id="available" placeholder="Available" value="0 available">
                  </div>

                    <span class="input-group-btn">
                        <button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
                        </button>
                    </span>
                </div>
            </div>

            <button type="button" class="btn btn-success addel-add"><i class="fa fa-plus"></i></button>
          </div>

        </div>
      </div> 

这是我的脚本

<script>
function tool(sel)
 {

     var tools=sel.value;
     alert(tools);
     var url='<?php echo base_url(); ?>admin/tool/ajax_available';
      $.post(url, {tools:tools}, function(data)
      {  

              alert("Value: " + $("#avail").html(data));

      });

   }
 </script>

这是我的控制器

public function ajax_available()
{
    $data['available']=$this->Tool_model->view_available_by_type($_POST['tools']);
    //var_dump($data['available']);
    $this->load->view('admin/tool/ajax_available',$data);
}

这是我的 ajax_available 视图

<input type="text" class="form-control" name="available"  id="available" placeholder="" value="<?php echo $available->available;?> available">

我的照片是这样的 Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG.

Answer 1

您没有为元素提供唯一标识符。每次添加带有下拉列表和文本框的新行时，它都会为这些新元素再次生成相同的 ID。这是无效的 HTML，所有元素都必须有唯一的 id。

所以当你这样做时

$("#avail").html(data)

它会找到具有该 ID 的元素的第一个实例 - 因为应该只有一个。就javascript而言，其他的都不存在，因为它们是无效的。

由于页面中有多个“可用”文本框，因此您不能依赖 ID 来填充正确的文本框。给你的“可用” div 一个类而不是一个 id，然后告诉脚本通过使用它在标记中的位置来找到相关的：

<div class="col-lg-3 avail">
  <input type="text" class="form-control available" name="available" placeholder="Available" value="0 available">
</div>

然后在您的代码中，而不是 $("#avail").html(data)，执行：

$(this).parent().parent().find(".avail").html(data);

这会在 DOM 上增加两个 div，以找到 select（函数上下文中的 this）和要更改的 div 的共同祖先，然后在其中搜索具有avail 类，并用数据填充它。

您还应该从任何其他可以复制的元素中删除“id”属性，例如“数量”。

附：我不知道你为什么要为这个“可用”属性使用文本框——它看起来像是来自数据库的状态值，用户不应该改变它。因此它应该是一个标签或跨度，真的。文本框用于输入，而不是输出。另外，您的用户可以键入和更改值，这可能会使他们感到困惑。但我会让你来解决这个问题。