更新动态列表php mysql Javascript

我有两个列表，一个是公司列表，一个是网站列表。每家公司在全国各地都有不同的网站。我在模式弹出窗口上并排显示两个列表。我让公司列表从查询中动态显示所有ok，我希望第二个列表填充站点，具体取决于从第一个列表中选择的公司

html元素如下所示：

<div class="row">
         <div class="col-md-6">
           <div class="container-fluid">
                    <div style="height: 400px; overflow-y: scroll">
                        <div class="list-group" name="companies" id="company">          
                        <!--Call the Showcompany() method from the select.class.php-->
                        <?php echo $opt->ShowCompany(); ?>  
                        </div>                      
                    </div><!--End of first input group-->
                </div><!--End of container-->
            </div><!--End of column-->

            <div class="col-md-6">
                <div class="container-fluid">
                    <div style="height: 400px; overflow-y: scroll">
                        <div class="list-group" multiple onchange="changeSelection(this.value)" name="sites" id="sites">                        
                        <?php echo $opt->ShowSite(); ?>  
                        </div>   
                    </div><!--End of first input group-->
                </div><!--End of container-->
            </div><!--End of column-->
      </div>

    //function to handle db connectivity
    protected function DbConnect()
    {
        include "db_config.php";
        $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
        mysql_select_db($db,$this->conn) OR die("can not select the database $db");
        return TRUE;
    }

    //function to query the companies and return list for companies list
    public function ShowCompany()
    {

        $sql = "SELECT company.company_name, company.id FROM company ORDER BY company.company_name ASC";
        $res = mysql_query($sql,$this->conn);
        $company = '<a class="list-group-item active" value="0">choose...</a>';
        while($row = mysql_fetch_array($res))
        {
            $company .= '<a class="list-group-item" value="' . $row['id'] . '">' . $row['company_name'] . '</a>';
        }
        return $company;


    }

    //function to query the sites and return list for sites list
    public function ShowSite()
    {
        $sql = "SELECT * FROM sites WHERE company_id=$_POST[id]";
        $res = mysql_query($sql,$this->conn);
        $site = '<a class="list-group-item" value="0">Select All</a>';
        while($row = mysql_fetch_array($res))
        {
            $site .= '<a class="list-group-item" value="' . $row['id'] . '">' . $row['site_name'] . '</a>';
        }
        return $site;
    }

$("select#company").change(function(){
    var id = $("select#company option:selected").attr('value');
    $.post("select_site.php", {id:id}, function(data){
        $("select#sites").html(data);
        });
    });

当我使用“选择”下拉列表时，我已经有了这样的功能，而不是锚定标记，我有选项标记，而且所有的功能都正常工作，但它从来都不适合我需要的功能，所以我决定创建两个列表视图

当jQuery用于我的select和option标记时，我的jQuery如下所示：

<div class="row">
         <div class="col-md-6">
           <div class="container-fluid">
                    <div style="height: 400px; overflow-y: scroll">
                        <div class="list-group" name="companies" id="company">          
                        <!--Call the Showcompany() method from the select.class.php-->
                        <?php echo $opt->ShowCompany(); ?>  
                        </div>                      
                    </div><!--End of first input group-->
                </div><!--End of container-->
            </div><!--End of column-->

            <div class="col-md-6">
                <div class="container-fluid">
                    <div style="height: 400px; overflow-y: scroll">
                        <div class="list-group" multiple onchange="changeSelection(this.value)" name="sites" id="sites">                        
                        <?php echo $opt->ShowSite(); ?>  
                        </div>   
                    </div><!--End of first input group-->
                </div><!--End of container-->
            </div><!--End of column-->
      </div>

    //function to handle db connectivity
    protected function DbConnect()
    {
        include "db_config.php";
        $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
        mysql_select_db($db,$this->conn) OR die("can not select the database $db");
        return TRUE;
    }

    //function to query the companies and return list for companies list
    public function ShowCompany()
    {

        $sql = "SELECT company.company_name, company.id FROM company ORDER BY company.company_name ASC";
        $res = mysql_query($sql,$this->conn);
        $company = '<a class="list-group-item active" value="0">choose...</a>';
        while($row = mysql_fetch_array($res))
        {
            $company .= '<a class="list-group-item" value="' . $row['id'] . '">' . $row['company_name'] . '</a>';
        }
        return $company;


    }

    //function to query the sites and return list for sites list
    public function ShowSite()
    {
        $sql = "SELECT * FROM sites WHERE company_id=$_POST[id]";
        $res = mysql_query($sql,$this->conn);
        $site = '<a class="list-group-item" value="0">Select All</a>';
        while($row = mysql_fetch_array($res))
        {
            $site .= '<a class="list-group-item" value="' . $row['id'] . '">' . $row['site_name'] . '</a>';
        }
        return $site;
    }

$("select#company").change(function(){
    var id = $("select#company option:selected").attr('value');
    $.post("select_site.php", {id:id}, function(data){
        $("select#sites").html(data);
        });
    });

---

我不会撒谎，jQuery并不是我最大的优势，我一辈子也弄不明白为什么它不会出现在第二个列表中。绝对任何帮助都会非常感谢，因为我已经花了三天的时间试图解决这个问题。谢谢。

在昨天尝试了一整天之后，仍然在努力解决这个问题，而且仍然没有什么乐趣让它工作，我真的认为这只是一个简单的javascript修复，如果您将注意力集中到问题的最后一部分，我将jQuery从选择标记切换到锚定标记，我想这似乎是我出错的地方。这些数据是否经常更改？对于

div

元素，没有

onchange

事件可用；它可用于表单元素…谢谢@itzmukeshy7，所以我只能用于表单元素的更改，而不能用于div？有没有其他方法可以在不使用on change的情况下填充第二个列表？您可以使用

onclick

事件根据用户的选择更改内容。在昨天尝试了一整天之后，仍然在努力解决这个问题，而且仍然没有什么乐趣让它工作，我真的认为这只是一个简单的javascript修复，如果您将注意力集中到问题的最后一部分，我将jQuery从select标记切换到anchor标记，我认为这似乎是我出错的地方。这些数据是否经常更改？对于

div

元素，没有

onchange

事件可用；它可用于表单元素…谢谢@itzmukeshy7，所以我只能用于表单元素的更改，而不能用于div？是否有其他方法可以填充第二个列表而不使用on change？您可以使用

onclick

事件根据用户选择更改内容。