設置動態輸入取決於選擇選項屬性

Question

我想設置輸入文本的值取決於選擇選項的屬性。

我需要在用戶選擇產品，他可以看到在價格領域的價格，我檢索的選項的值，但我不知道如何根據產品設置的輸入，因爲所有的價格輸入具有相同的名稱。

查看

<?php $form=array('id'=>'myform');?> 
    <?php echo form_open('Order/submit',$form);?> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Customer Details</div> 
      <div class="panel-body"> 
       <div class="col-xs-3"> 
         <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name" id="customer_name"> 
          <?php foreach ($customerdata as $c): 
           echo "<option value ='$c->c_id'>" . $c->c_name . "</option>"; 
          endforeach; 
          ?> 
         </select> 
       </div> 
       <div class="col-xs-3"> 
         <input type="text" class="form-control" name="invoice_number" id="invoice_number" placeholder="Invoice Number"/> 
       </div> 
       <div class="col-xs-3"> 
         <input type="text" class="form-control" name="branch" id="branch" placeholder="Branch"/> 
       </div> 
       <div class="col-xs-3"> 
         <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term" id="payment_term"> 
          <option id-="cash">Cash</option> 
          <option id-="bank">Bank</option> 
          <option id-="other">Other</option> 
         </select> 
       </div> 
      </div><!--customer panel-Body--> 
      <div class="panel-heading">Invoice Details 
      </div> 

      <div class="panel-body"> 

       <div id="education_fields"> 

       </div> 
       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <select class="selectpicker" data-show-subtext="true" data-live-search="true" id="select_product" name="select_product[]"> 
          <?php 
          foreach($order as $row): 
           echo"<option data-price='$row->p_price' value ='$row->p_id'>".$row->p_name. "</option>"; 
          endforeach; 
          ?> 
         </select> 
        </div> 
       </div> 
       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="qty" name="qty[]" value="" placeholder="Quantity"> 
        </div> 
       </div> 
       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="price" name="price[]" value="" placeholder="Price"> 
        </div> 
       </div> 

       <div class="col-sm-3 nopadding"> 
        <div class="form-group"> 
         <div class="input-group"> 
           <input type="text" class="form-control" id="total" name="total[]" value="" placeholder="Total"> 
          <div class="input-group-btn"> 
           <button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="clear"></div> 

      </div> 
      <div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div> 
     </div> 
     <button type="submit" class="btn btn-primary center-block">Checkout</button> 
    <?php echo form_close();?> 

jQuery的1：用來添加生成產品新行。

<script> 

var room = 0; 
function education_fields() { 

    room++; 
    var objTo = document.getElementById('education_fields'); 
    var divtest = document.createElement("div"); 
    divtest.setAttribute("class", "form-group removeclass"+room); 
    var rdiv = 'removeclass'+room; 
    var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" id="select_product" name="select_product[]"><?php foreach($order as $row){ ?><option value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="qty" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control" id="total" name="total[]" placeholder="Total"/></select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>'; 

    divtest.innerHTML = medo; 
    objTo.appendChild(divtest); 
    $('select').selectpicker(); 
} 
function remove_education_fields(rid) { 
    $('.removeclass'+rid).remove(); 
} 

jquery 2：這裏我試圖根據產品設置價格輸入。

<script> 
$('select').change(function(event) { 
    var selected = $(this).find("option:selected"); 

    var myprice = selected.attr('data-price'); 
    document.getElementsByName(price[]).value = myprice; 
    //some dom edits 
}); 

Answer 1

更新JQUERY2

//You must replace id attribute for input box into class 
$('select').change(function(event) { 
    var selected = $(this).find("option:selected"); 

    var myprice = selected.attr('data-price'); 
    //Then we set value for the input box 
    $(this).parent().parent().next().next().find('.price').val(myprice); 
});