別の結果が同じフィールドにある

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

そして、あなたのコードでは、代わりに$("#avail").html(data)の、操作を行います。あなたの「無駄」の代わりにIDのクラスをDIV、その後、マークアップ内での位置を使用することによって、関連するものを見つけるためにスクリプトに指示を与えます。

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

これは、（機能の文脈でthis）を選択し、変更したいdiv要素の両方の共通の祖先を見つけるために、2つのdivタグでDOMを上がり、その後のためにその中に検索要素をavailクラスで置き換え、データを入力します。

また、「量」など、複製可能な他の要素から「id」属性も削除する必要があります。

P.S.なぜこの "利用可能な"プロパティのテキストボックスを使用するのか分かりません。ユーザーが変更すべきではないデータベースからのステータス値のようです。したがって、それは本当にラベルまたはスパンでなければなりません。テキストボックスは入力用であり、出力用ではありません。さらに、ユーザーが入力して値を変更すると、値が混乱する可能性があります。しかし、私はそれを並べ替えるためにあなたを残します。