从属下拉列表无法正常工作 [英] Dependent dropdown not working correctly

查看：87
本文介绍了从属下拉列表无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我第一次访问此网站，所以我会努力追逐.

我一直在使用PHP，AJAX，jquery和MySQL作为数据库来开发固定资产控制Web系统(项目结构是通过遵循以下网站上的教程进行的:

populateSelGrp.php:将类别加载到父级下拉列表 

<?php

require 'libAF.php';

$data = "";

$object = new CRUD();

$grupos = $object->populateSelGrp();

$data .= '<select id="select_grp" class="form-control" onchange="populateSelSgrp()">';
$data .= '<option value="0" disabled selected>Escoja grupo</option>';    
if (count($grupos) > 0) {
    foreach ($grupos as $grupo) {
        $data .= '<option id="selected_grp" value="' . $grupo['id_grp'] . '"> ' . $grupo['nombre_grp'] . '</option>';
    }
}
else
{
    $data .= '<option>No hay opciones disponibles</option>';
}

$data .= '</select>';

echo $data;

?>

populateSelSgrp.php:将子类别加载到子下拉列表 

<?php

require 'libAF.php';

if (isset($_POST['id_grp']) && isset($_POST['id_grp']) != "") {
    $id_grp = $_POST['id_grp'];
    $data = "";

    $object = new CRUD();

    $subgrupos = $object->populateSelSgrp($id_grp);

    $data .= '<label for="select_sgrp">Sub-grupo</label>';
    $data .= '<select id="select_sgrp" class="form-control">';
    $data .= '<option value="0" disabled selected>Escoja sub-grupo</option>';

    if (count($subgrupos) > 0) {
        foreach ($subgrupos as $subgrupo) {    
            $data .= '<option value="' . $subgrupo['id_sgrp'] . '"> ' . $subgrupo['nombre_sgrp'] . '</option>';
        }
    }
    else
    {
        $data .= '<option>No hay opciones disponibles</option>';        
    }

    $data .= '</select>';

    echo $data;
}

?>

scptAF.js:包含使输入正常工作所需的脚本 

function populateSelGrp(){        
$.get("ajax/activoFijo/populateSelGrp.php", {
},
    function (data, status) {
//load options to dropdown list
        $(".option_grp").html(data);
    }
);
}

function populateSelSgrp(id_grp){
$.ajax({
    url: "ajax/activoFijo/populateSelSgrp.php",
    method: "POST",
    data:{id_grp: id_grp},
    success:function(data){
        $(".option_sgrp").html(data);
    }
})            
}

activos.php(资产):用户在其中添加，删除或更新资产的可见页面. 

 <div class="form-group">
     <label for="select_grp">Grupo</label>
     <div class="option_grp"></div>
 </div>         
 <div class="form-group">
      <div class="option_sgrp"></div>
 </div>

解决方案

我终于找到了解决此问题的方法，那是我必须添加到javaScript文件中以将ID发送到第二个下拉列表的一些代码.尽管我终于解决了我的问题，但我希望看到有关如何解决该问题的其他建议.

这是我的摘录

scptAF.js 

function populateSelGrp() {
$.get("ajax/activoFijo/populateSelGrp.php", {
},
    function (data, status) {
//load options to dropdown list
        $(".option_grp").html(data);
    }
);
}

function changeGrpId(){
var id_grp = document.getElementById("select_grp").value;
populateSelSgrp(id_grp);
}

function populateSelSgrp(id_grp) {
$.ajax({
    url: "ajax/activoFijo/populateSelSgrp.php",
    method: "POST",
    data:{id_grp: id_grp},
    success:function(data){
        $(".option_sgrp").html(data);
    }
})
}

this is my first time on this site so I'll cut to chase.

I've been working on a fixed assets control web system using PHP, AJAX, jquery and MySQL as database (the project structure was made by following the tutorial from this website: https://www.itechempires.com/2016/07/pdo-crud-operations-using-php-bootstrap/ ), where such items are registered along with the categories to which each asset belongs, the transactions made by the users within the company and the reports generated by each transaction.

Currently I'm stuck with the dropdowns since I tried anything I could to make them work but without the results I've been looking for, which is: in a modal there's a form where an asset is going to be added with its related information, two of those details are categories and subcategories which are handled by dependent dropdowns, the dropdown regarding to subcategories will be displayed once a category is selected.

The code snippets will be up for review which will be focused on the ones related to the dropdowns:

Tables

grupo (group or category)

  • id_grp (group id,autoincremented, not visible by the user)
  • codigo_grp (code)
  • nombre_grp (name)

subgeupo (subgroup or subcategory)

  • id_sgrp (subgroup id, autoincremented, not visible by the user)
  • codigo_sgrp (code)
  • nombre_sgrp (name)
  • vidaUtil_sgrp (useful life)
  • id_grp (group id, foreign key)

libAF.php: Contains all queries for crud operations

    /* 
    * Get group's id and name
    *
    * @return $id_grp, $nombre_grp
    * */
    public function populateSelGrp()
    {
        $query = $this->db->prepare("SELECT id_grp, nombre_grp FROM grupo");
        $query->execute();
        $data = array();
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }
        return $data;
    }

    /* 
    * Get sub-group's id and name
    *
    * @return $id_grp, $nombre_grp
    * */
    public function populateSelSgrp($id_grp)
    {
        $query = $this->db->prepare("SELECT * FROM subgrupo WHERE id_grp = :id_grp");
        $query->bindParam("id_grp", $id_grp, PDO::PARAM_STR);
        $query->execute();
        $data = array();
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }
        return $data;
    }

populateSelGrp.php: loads the categories on to the parent dropdown

<?php

require 'libAF.php';

$data = "";

$object = new CRUD();

$grupos = $object->populateSelGrp();

$data .= '<select id="select_grp" class="form-control" onchange="populateSelSgrp()">';
$data .= '<option value="0" disabled selected>Escoja grupo</option>';    
if (count($grupos) > 0) {
    foreach ($grupos as $grupo) {
        $data .= '<option id="selected_grp" value="' . $grupo['id_grp'] . '"> ' . $grupo['nombre_grp'] . '</option>';
    }
}
else
{
    $data .= '<option>No hay opciones disponibles</option>';
}

$data .= '</select>';

echo $data;

?>

populateSelSgrp.php: loads the subcategories on to the child dropdown

<?php

require 'libAF.php';

if (isset($_POST['id_grp']) && isset($_POST['id_grp']) != "") {
    $id_grp = $_POST['id_grp'];
    $data = "";

    $object = new CRUD();

    $subgrupos = $object->populateSelSgrp($id_grp);

    $data .= '<label for="select_sgrp">Sub-grupo</label>';
    $data .= '<select id="select_sgrp" class="form-control">';
    $data .= '<option value="0" disabled selected>Escoja sub-grupo</option>';

    if (count($subgrupos) > 0) {
        foreach ($subgrupos as $subgrupo) {    
            $data .= '<option value="' . $subgrupo['id_sgrp'] . '"> ' . $subgrupo['nombre_sgrp'] . '</option>';
        }
    }
    else
    {
        $data .= '<option>No hay opciones disponibles</option>';        
    }

    $data .= '</select>';

    echo $data;
}

?>

scptAF.js: Contains the scripts needed to make the inputs work

function populateSelGrp(){        
$.get("ajax/activoFijo/populateSelGrp.php", {
},
    function (data, status) {
//load options to dropdown list
        $(".option_grp").html(data);
    }
);
}

function populateSelSgrp(id_grp){
$.ajax({
    url: "ajax/activoFijo/populateSelSgrp.php",
    method: "POST",
    data:{id_grp: id_grp},
    success:function(data){
        $(".option_sgrp").html(data);
    }
})            
}

activos.php (assets): visible page where the user adds, removes or updates an asset.

 <div class="form-group">
     <label for="select_grp">Grupo</label>
     <div class="option_grp"></div>
 </div>         
 <div class="form-group">
      <div class="option_sgrp"></div>
 </div>

解决方案

I finally found a solution for this mess, was a little code I had to add to the javaScript file to send the id to the second dropdown. Although I finally fixed my problem, I'd like to see other suggestions on how to tackle this problem.

Here's my snippet

scptAF.js

function populateSelGrp() {
$.get("ajax/activoFijo/populateSelGrp.php", {
},
    function (data, status) {
//load options to dropdown list
        $(".option_grp").html(data);
    }
);
}

function changeGrpId(){
var id_grp = document.getElementById("select_grp").value;
populateSelSgrp(id_grp);
}

function populateSelSgrp(id_grp) {
$.ajax({
    url: "ajax/activoFijo/populateSelSgrp.php",
    method: "POST",
    data:{id_grp: id_grp},
    success:function(data){
        $(".option_sgrp").html(data);
    }
})
}

这篇关于从属下拉列表无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆