如果选择下拉列表中的值，如何进行自动填充？

时间：2015-09-24 06:28:47

标签： javascript jquery ajax codeigniter

您好我使用的是codeigniter框架。我有一个自动填充代码，就像我在文本框中输入id一样，它从数据库中检索一个值并自动填充剩余的文本框。 当我输入完整的id并点击我在ajax的帮助下自动填充的地方。现在，当我从相关数据下拉列表中选择一些数据时，我需要自动填充它们。这该怎么做？ 有人可以帮我编码吗？ 这是我的代码，我被击中了。

我的控制器功能

<?php
class Admin_billing extends CI_Controller {

    public function __construct()
    {
        parent::__construct();

        $this->load->model('billing_model');
        $this->load->model('client_model');
        $this->load->model('employee_model');
        $this->load->model('products_model');
        $this->load->model('package_model');
        if(!$this->session->userdata('is_logged_in')){
            redirect('admin/login');
        }
    }

        public function ticket($id)
    {

        $id=$this->uri->segment(4);

        $data['id']=$this->uri->segment(4);

        $data['main_content'] = 'admin/billing/ticket_page';
        $this->load->view('includes/template', $data);  
     }

     public function getdetails()
     {  
        $data_to_search=$_POST['val'];
        $details=array();

        $details['description']=$this->billing_model->get_service_name($data_to_search);
        $details['type']=$this->billing_model->get_service_name($data_to_search);
        $details['cost']=$this->billing_model->get_service_name($data_to_search);
        $details['qty_prch'] = 1;
        $details['qty_used'] = 1;
        $details['price']=$this->billing_model->get_service_pricevalue($data_to_search);
        echo json_encode($details);
     }



}?>

这是我的控制器页面admin_billing.php。这里我有一个getdetails()，当我在文本框中输入一些值并单击某处时，会调用它。当我点击某处或按Tab键时，在ajax的帮助下，该值将从视图发布到此函数。

这是我的模型页面。

<?php
class billing_model extends CI_Model {

    public function __construct()
    {
        $this->load->database();

    }
    public function get_service_name($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['name'];
}

    public function get_service_pricevalue($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['price']; 
}

    public function get_service_mins($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['mins']; 
}
    public function get_service_price($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['price']; 
}
    public function get_service_id($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['id']; 
}

}
?>

在这个模型页面中，billing_model.php我几乎没有从数据库中检索值的函数。在这里，我从控制器中获取id，并在id的帮助下获取相关内容。

这是我的视图页面。

我有一个函数，当onchange动作发生时，从名为pid[]的文本框中获取值并调用ajax函数getvalues() 我有另一个函数BindControls()用于自动完成操作。当我再次选择某个值时，我需要将该值传递给ajax函数getvalues() 

<html>

<head>

  <link href="<?php echo base_url(); ?>assets/css/demo.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-compat-git.js'></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>


<script type='text/javascript'>
var baseurl='<?php echo base_url(); ?>';
$(function() {
    $('#test').on('change', 'input[name="pid[]"]', function() {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(this.value, indexOfTheChangedRow);
    });
});


function get_values(val,rowIndex)
{
 $.ajax({
    url: baseurl + 'admin/billing/getdetails',
    type: 'post',
    data: {
        val: val
    },
    success: function (indexOfTheChangedRow, response) {
        if (response != "") {
            var json = jQuery.parseJSON(response),
                rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");

            // add the changed row as the context to restrict the search for the classes to this one row only
            $('.description', rowToUpdate).val(json.description);
            $('.type', rowToUpdate).val(json.type);
            $('.qty_used', rowToUpdate).val(json.qty_used);
             $('.qty_prch', rowToUpdate).val(json.qty_prch);
             $('.price', rowToUpdate).val(json.price);

        }
    }.bind(window, rowIndex),
    error: function (response) {
        alert("error");
    }
});
}

function displayResult() {
<?php

      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
    $dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');

      ?>

    var complex = <?php echo json_encode($dropdown); ?>;

    var row = document.getElementById("test").insertRow(-1);
    row.innerHTML = '<td><div>'+complex+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td class="qty_prch"><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td class="price"><input type="text" class="price" value="" style="width:70px;"/></td><td><input type="text" value="" class="discount" style="width:70px;"/></td><td><input type="text" value="" class="tax" style="width:70px;"/></td><td class="total"><input type="text" value="" class="total" style="width:70px;"/></td>';
}
</script>
<script>
$(document).ready(function () {
    $('#test').on('mousemove', 'input', sumtotal);
    function sumtotal() {
        var hour = 0;
        var rate = 0;
        var total = 0;
        var subtotal = 0;
        $('#test tbody tr').each(function () {
            hour =  parseNumber($(this).find('.price input').val()); 
            rate = parseNumber($(this).find('.qty_prch input').val());
            subtotal = (hour * rate);
            $(this).find('.total input').val(subtotal);
            total += subtotal;
        });
        $('.Grandtotal input').val(total);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});
$(document).ready(function() {
            BindControls();
        });

        function BindControls() {
            var Countries = ['ARGENTINA', 
                'AUSTRALIA', 
                'BRAZIL', 
                'BELARUS', 
                'BHUTAN',
                'CHILE', 
                'CAMBODIA', 
                'CANADA', 
                'CHILE', 
                'DENMARK', 
                'DOMINICA'];

            $('#pid').autocomplete({
                source: Countries,
                autoFocus: true,
                minLength: 0,
                scroll: true
            }).focus(function() {
                $(this).autocomplete("search", "");
            });
        }

</script>

</head>

                <?php

      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
 echo form_open('admin/billing/ticket_page');
      ?>
            <table id="test">
            <thead>
            <tr>
            <td style="width:80px;">employee</td>
            <td style="width:35px;">start time</td>
            <td style="width:35px;">id</td>
            <td style="width:145px;">Description</td>
            <td style="width:45px;">Type</td>
            <td style="width:45px;">Qty prch</td>
            <td style="width:45px;">Qty used</td>
            <td style="width:70px;">Price</td>
            <td style="width:70px;">discount</td>
            <td style="width:70px;">Tax</td>
            <td style="width:70px;">Total</td>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td><?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?></td>
            <td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
            <td><input type="text" name="pid[]" id="pid" value="" style="width:35px;"/></td>
            <td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
            <td><input type="text" name="type[]" class="type" style="width:45px;"/></td>
            <td class="qty_prch"><input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;"/></td>
            <td><input type="text" name="qty_used[]" class="qty_used" style="width:45px;"/></td>
            <td class="price"><input type="text" name="price[]" class="price" style="width:70px;"/></td>
            <td><input type="text" name="discount[]" class="discount" style="width:70px;"/></td>
            <td><input type="text" name="tax[]" class="tax" style="width:70px;"/></td>
            <td class="total"><input type="text" name="total[]" class="total" style="width:70px;"/></td>

            </tr>
            </tbody>



            </table>

            <div id="add_row">
        <button type="button" onClick="displayResult()" class="add_r"></button>
                </div>

            <?php echo form_close(); ?>  

             <div id="last_button">
        <input type="button" class="Delete"/>
            <input type="button" class="Edit"/>

  <script src="<?php echo base_url(); ?>assets/js/function.js"></script>

</body>
</html>

有人可以帮我编码吗？请给我一些解决方案。

1 个答案:

答案 0 :(得分：0)

添加行时，.on('autocompleteselection'...仅适用于现有的html，而不适用于生成的任何内容。你需要添加委托，所以请从：

$(document).ready(function () {

    $('#pid').on('autocompleteselect', function (e, ui) {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(ui.item.value, indexOfTheChangedRow);
    });
});

到

$(document).ready(function () {

    $('#pid').on('autocompleteselect', 'tr',function (e, ui) {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(ui.item.value, indexOfTheChangedRow);
    });
});

通过这种方式，您将.on委托给也包括稍后添加的表行

相关问题
最新问题