选择组合框代码生成器时,如何向表中显示数据

时间:2017-08-01 03:07:07

标签: javascript php jquery codeigniter combobox

我根据combobox制作了database。 我希望当我选择一个combobox并立即显示我选择的相应表格combobox时。 我选择西java表的例子将显示bandung和bogor。

这是我的控制器

public function show() {
    $data['provinsi'] = $this->mdl_onchange->get_provinsi();
    $data['kota'] = $this->mdl_onchange->get_kota();
    $this->load->view('form_onchange', $data);
}

这是我的模特

function get_provinsi() {
    $query = $this->db->get('table_provinsi');
    return $query->result();
}

function get_kota() {
    $query = $this->db->get('table_kota');
    return $query->result();
}

这是我的观点

<p>
    <label for="select_provinsi"></label>
    <select name="select_provinsi" id="select_provinsi">
        <option>--Pilih Provinsi--</option>

        <?php foreach($provinsi as $row_provinsi)   {   ?>
            <option value="<?php echo $row_provinsi->id_provinsi?>">
                <?php echo $row_provinsi->nama_provinsi; ?>    
            </option>
        <?php } ?>
    </select>
</p>
<table border="1" name="select_kota" id="select_kota" style="border-
      collapse:collapse; width:60%;">
    <tr style="background:yellow;">
        <th>Id kota</th>
        <th>Id provinsi</th>
        <th>nama kota</th>
    </tr>
    <?php foreach($kota as $c){?>
        <tr>
            <td>
                <?php echo $c->id_kota; ?>
            </td>
            <td>
                <?php echo $c->id_provinsi; ?>
            </td>
            <td>
                <?php echo $c->nama_kota; ?>
            </td>
        </tr>
    <?php } ?>
</table>

我的jquery

<script type ="text/javascript">
    $("#select_kota").chained("#select_provinsi");
</script>

我是这样做的,但是当我没有选择使用combobox西爪哇时,它的数据总会出现。 it is

1 个答案:

答案 0 :(得分:0)

我看到你正在使用链式Jquery。这是用于链接两个选择,而不是用于表格。

为此,您可以获得的最佳方法是执行Ajax调用以获取表行并修改表tbody内部HTML。

首先,你需要修改模型get_kota()函数,只选择一个provinsi上的kota,它的id_provinsi:

function get_kota($id_provinsi) {
    $this->db->where('id_provinsi', $id_provinsi);
    $query = $this->db->get('table_kota');
    return $query->result();
}

之后,在您的控制器上创建一个新功能,通过Ajax返回新值。在这里,我还将修改原始方法以删除第一个kotas调用:

public function show() {
    $data['provinsi'] = $this->mdl_onchange->get_provinsi();
    $this->load->view('form_onchange', $data);
}

public function ajax_getkotas($id_provinsi) {
    $kotas = $this->mdl_onchange->get_kota($id_provinsi);

    foreach ($kotas as $kota) {
       echo '<tr>\n';
           echo '<td>' . $kota->id_kota . '</td><td>' . $kota->id_provinsi . '</td><td>' . $kota->nama_kota . '</td>\n';
       echo '</tr>\n';
    }
}

现在,让我们回到您的观点。我们将它分为三个部分:select,table和jquery。

您可以保持现在的选择。

表格首先是空的,你可以这样:

<table border="1" name="select_kota" id="select_kota" style="border-
      collapse:collapse; width:60%;">
    <thead>
        <tr style="background:yellow;">
            <th>Id kota</th>
            <th>Id provinsi</th>
            <th>nama kota</th>
        </tr>
    </thead>
    <tbody>
         <tr><td>Please, select a provinsi from the above dropdown to display results</td></tr>
    </tbody>
</table>

现在让我们来看看JQuery Ajax调用:

$('#select_provinsi').on('change', function() {
  $.ajax({
        type: 'GET',
        url: "<?php echo site_url('your_controllername/ajax_getkotas') ?>" + "/" + $('#select_provinsi').val() , // we call our new function with the selected id
        dataType: "html",
        success: function (data) { // change the data from our response
            $('#select_kota tbody').html(data); //rows are printed inside the tbody of our table
        },
        failure: function(err) {console.log("Error on the Ajax call");} // Some error feedback just in case. You can check network XHR to see what's going on.
    });
})

有了这个,我想你可以让它运作起来。现在让我知道这对你有用,或者我们需要改变一切。