Note that there are some explanatory texts on larger screens.

plurals
  1. POdropdown onchange event is not working
    primarykey
    data
    text
    <p>I want to fill the Dropdown onchange of another Dropdown like on Country change then State dorpdown should be fill and on change of state City. I am trying to doing this by Ajax but it is not responding. Code which i have written that is </p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ load_options('','country'); }); function load_options(id,index){ $("#loading").show(); if(index=="state"){ $("#city").html('&lt;option value=""&gt;Select city&lt;/option&gt;'); } $.ajax({ url: "/ajax.php?index="+index+"&amp;id="+id, complete: function(){$("#loading").hide();}, success: function(data) { $("#"+index).html(data); } }) } &lt;/script&gt; </code></pre> <h3>HTML:</h3> <pre><code>&lt;label&gt;Select Country&lt;/label&gt; &lt;select name="country" id="country" onChange="load_options(this.value,'state');"&gt; &lt;option value=""&gt;Select country&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Select State&lt;/label&gt; &lt;select name="state" id="state" onChange="load_options(this.value,'city');"&gt; &lt;option value=""&gt;Select state&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Select city&lt;/label&gt; &lt;select name="city" id="city"&gt; &lt;option value=""&gt;Select City&lt;/option&gt; &lt;/select&gt; </code></pre> <h3>Ajax.php:</h3> <pre><code>&lt;?php class AJAX { private $database = NULL; private $_query = NULL; private $_fields = array(); public $_index = NULL; const DB_HOST = "localhost"; const DB_USER = "root"; const DB_PASSWORD = "12345"; const DB_NAME = "AnandDb"; public function __construct(){ $this-&gt;db_connect(); // Initiate Database connection $this-&gt;process_data(); } /* * Connect to database */ private function db_connect(){ $this-&gt;database = mysql_connect(self::DB_HOST,self::DB_USER,self::DB_PASSWORD); if($this-&gt;database){ $db = mysql_select_db(self::DB_NAME,$this-&gt;database); echo "Db connect."; } else { echo mysql_error();die; echo "Db Not connected."; } } private function process_data(){ $this-&gt;_index = ($_REQUEST['index'])?$_REQUEST['index']:NULL; $id = ($_REQUEST['id'])?$_REQUEST['id']:NULL; switch($this-&gt;_index){ case 'country': $this-&gt;_query = "SELECT country_id,country_name FROM tbl_country"; $this-&gt;_fields = array('id','country_name'); break; case 'state': $this-&gt;_query = "SELECT * FROM tbl_state WHERE country_id=$id"; $this-&gt;_fields = array('id','state_name'); break; case 'city': $this-&gt;_query = "SELECT * FROM tbl_city WHERE state_id=$id"; $this-&gt;_fields = array('id','city_name'); break; default: break; } $this-&gt;show_result(); } public function show_result(){ echo '&lt;option value=""&gt;Select '.$this-&gt;_index.'&lt;/option&gt;'; $query = mysql_query($this-&gt;_query); while($result = mysql_fetch_array($query)){ $entity_id = $result[$this-&gt;_fields[0]]; $enity_name = $result[$this-&gt;_fields[1]]; echo "&lt;option value=".$entity_id."&gt;".$enity_name."&lt;/option&gt;"; } } } $obj = new AJAX; ?&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload