动态下拉列表使用ajax,sql和php

我有一个运作良好的代码.它会根据前面的列表填充下拉列表,但是存在问题.
在< option value =“”>中的html表单中字段显示“id”,它是一个数值而不是“name”.有人可以告诉我它如何显示“名称”而不是值.实际问题是,当它在sql 数据库中保存数据时,它存储国家或州或城市的相应“id”而不是其“名称”.

这是我正在使用的代码.我尝试更改ajax.PHP echo中的最后一行“< option value ='$entity_id'> $enity_name< / option>”;回显“< option value ='$entity_name'> $enity_name< / option>”;但是动态下拉列表不起作用,因为它们依赖于“id”.非常感谢您的帮助.

ajax.PHP

<?PHP
    /* File : ajax.PHP
     * Author : Manish Kumar Jangir
    */
    class AJAX {

        private $database = NULL;
        private $_query = NULL;
        private $_fields = array();
        public  $_index = NULL;
        const DB_HOST = "localhost";
        const DB_USER = "admin";
        const DB_PASSWORD = "admin";
        const DB_NAME = "disciples";


        public function __construct(){
            $this->db_connect();                    // Initiate Database connection
            $this->process_data();
        }

        /*
         *  Connect to database
        */
        private function db_connect(){
            $this->database = MysqL_connect(self::DB_HOST,self::DB_USER,self::DB_PASSWORD);
            if($this->database){
                $db =  MysqL_select_db(self::DB_NAME,$this->database);
            } else {
                echo MysqL_error();die;
            }
        }

        private function process_data(){
            $this->_index = ($_REQUEST['index'])?$_REQUEST['index']:NULL;
            $id = ($_REQUEST['id'])?$_REQUEST['id']:NULL;
            switch($this->_index){
                case 'country':
                    $this->_query = "SELECT * FROM countries";
                    $this->_fields = array('id','country_name');
                    break;
                case 'state':
                    $this->_query = "SELECT * FROM states WHERE country_id=$id";
                    $this->_fields = array('id','state_name');
                    break;
                case 'city':
                    $this->_query = "SELECT * FROM cities WHERE state_id=$id";
                    $this->_fields = array('id','city_name');
                    break;
                default:
                    break;
            }
            $this->show_result();
        }

        public function show_result(){
            echo '<option value="">Select '.$this->_index.'</option>';
            $query = MysqL_query($this->_query);
            while($result = MysqL_fetch_array($query)){
                $entity_id = $result[$this->_fields[0]];
                $enity_name = $result[$this->_fields[1]];
                echo "<option value='$entity_id'>$enity_name</option>";
            }
        }
    }

    $obj = new AJAX;

?>

的index.html

<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">
<head>
<title>Country State City Dependent Dropdown using Ajax</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    load_options('','country');
});

function load_options(id,index){
    $("#loading").show();
    if(index=="state"){
        $("#city").html('<option value="">Select city</option>');
    }
    $.ajax({
        url: "ajax.PHP?index="+index+"&id="+id,
        complete: function(){$("#loading").hide();},
        success: function(data) {
            $("#"+index).html(data);
        }
    })
}
</script>
</head>
<body>
<div style="width:800px; margin:auto;padding-top:100px;">
<h1>Country,State,City dynamic dependent dropdown using Ajax and Jquery</h1>
<form>
        <label>Select Country</label>
        <select id="country" name="country" onchange="load_options(this.value,'state');">
            <option value="">Select country</option>
        </select>
        &nbsp;&nbsp;&nbsp;
        <label>Select State</label>
        <select id="state" name="state" onchange="load_options(this.value,'city');">
            <option value="">Select state</option>
        </select>
        &nbsp;&nbsp;&nbsp;
        <label>Select city</label>
        <select id="city" name="city">
            <option value="">Select City</option>
        </select>
        <img src="loader.gif" id="loading" align="absmiddle" style="display:none;"/>
</form>
</div>
</body>
</html>

解决方法:

你可以让脚本做你想做的事

>将id显示为数据属性. – &GT Ajax-&GT show_result()
>在ajax调用中将该属性用于id参数. – &GT load_options()
>传递整个<选项> load_options()的元素

对于带有cahages的ajax查询,this.value是错误的,因为它是一个名称,但是它仍然具有id作为数据属性.

<select id="country" name="country" 
        onchange="load_options(this, 'state');">
    <option value="">Select country</option>
</select>

由于id参数是表单中的选项元素,我们需要进行补偿以获得正确的id.

function load_options(id,index){
...
that = $(id).find(":selected");
id = that.data('realid');

$.ajax({
    url: "ajax.PHP?index="+index+"&id="+id,
...

让value属性保存名称,但保留id.

public function show_result(){
...
    while ($result = MysqL_fetch_array($query)){
        ...
        printf( '<option data-realid="%s" value="%s">%s</option>',
               $entity_id,
               $enity_name,
               $enity_name );

这应该回答您的问题,并根据表单的提交和存储方式,它可以解决您的问题.但是我对此表示怀疑,因为你忽略了向我们展示的那部分很可能会期待国家和城市的身份,而不是他们的名字.

动态下拉列表使用ajax,sql和php

相关推荐