4

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

这是我正在使用的代码。我尝试将 ajax.phpecho "<option value='$entity_id'>$enity_name</option>";中的最后一行更改为，echo "<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;

?>

索引.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>
4

2 回答 2

1

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

  1. 将 id显示为数据属性。-->Ajax->show_result()
  2. 在 ajax 调用中将该属性用于 id 参数。-->load_options()
  3. 将整个 <option> 元素传递给load_options()

this.value对于带有 cahages 的 ajax 查询是错误的，因为它是一个名称，但this仍然具有 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 );

这应该可以回答您的问题，并且根据表单的提交和存储方式，它可能会解决您的问题。但是，我对此表示怀疑，因为您忽略向我们展示的部分可能期望的是州和城市的 id 而不是他们的名字。

于 2014-03-10T02:59:06.373 回答
1

我的英语不好，所以我就写一些我从你那里得到的东西。

1: You want to get a dropdown list depend on the index
2: You want to shown selected options depend on the id

首先，您的代码很糟糕。php代码只是试图获取你需要的数据，你为什么和html混在一起？

让我们尝试解决第一个问题，得到一个下拉列表。你应该只是让php代码来获取你需要的数据，所以你最好修改你的php函数show_result，我想这样写：

public function show_result(){
        $tmpData = array();
        $i = 0;
        $query = mysql_query($this->_query);
        while($result = mysql_fetch_array($query)){
            $id = $result[$this->_fields[0]];
            $enity_name = $result[$this->_fields[1]];
            $tmpData[$i]['id'] = $id;
            $tmpData[$i]['name'] = $enity_name;
        }
        return $tmpData;   //here it saves data which you want to shown in drop down list 
    }

然后在文件 ajax.php 的末尾，

 $obj = new AJAX;
 echo json_encode($obj->show_result());

然后在 js 脚本中，尝试解析从 ajax.php 获得的数据，它是一个 json 字符串，它包含 id 和名称。在此处生成下拉选择器的选项。

    function load_options(id,index){
    $("#loading").show();
    if(index=="state"){
        $("#city").html('<option value="">Select city</option>');
    }
    $.ajax({
        url: "ajax.php?index="+index,  //do not pass id 
        complete: function(){$("#loading").hide();},
        success: function(data) {
            var jsonObj = eval('('+data+')');
            var selected = false;
            var options = '';
            for(jsonObj in eachData){
             if(eachData.id == id)
               selected = true;  //  shown selected if it's the right option you want to see
             options +=  '<option                                                 value="'+eachData.id+'"'+selcted?"selected":""+'>'+eachData.name+'</option>';
             selected = false;
            }
            $("#"+index).html(options);
        }
    })
}

然后你会得到一个你想要的下拉列表。我只是编写这些代码来指导你，我没有调试和测试它们，只是尝试方法：从 php 获取数据，在页面中显示为 html。

仅此而已。再次为我糟糕的英语感到抱歉（我的中文说得很好:)）

于 2014-10-12T16:11:11.490 回答