動的入力の設定は、選択肢の属性によって異なります。

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(); 
} 

ここでは、商品に基づいて価格入力を設定しようとしています。

<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); 
});