Question

我想设置输入文本的值取决于选择选项属性。

我需要当用户选择产品时他可以在价格字段中看到价格，我在选项中检索了价值，但我不知道如何根据产品设置输入，因为所有的价格输入都有同名。

查看

kthread_worker_fn()

Jquery 1：用于添加的产品为产品生成一个新行。

<?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 2：这里我试图根据产品设置价格输入。

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

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

设置动态输入取决于选择选项属性

1 个答案: