Fill Dropdown Based on Another's Selection with a Variable/Function

Question

Fill Dropdown Based on Another's Selection with a Variable/Function

501 Views Asked by Placowdepuss At 03 April 2025 at 21:07

I have two drop down lists generated from SQL queries on a database. They are the following:

<?php

$conn = new mysqli('localhost', 'root', '', 'Rosters') 
or die ('Cannot connect to db');

$result = $conn->query("SELECT City, Name FROM Teams");

echo "<select name='Teams'>";

while ($row = $result->fetch_assoc()) {

              unset($city, $team);
              $city = $row['City'];
              $name = $row['Name'];
              $fullname = $city." ".$name;
              echo '<option value="'.$fullname.'">'.$fullname.'</option>';

 }

echo "</select>";
?>

and

<?php

$conn = new mysqli('localhost', 'root', '', 'Rosters') 
or die ('Cannot connect to db');

$team = "Chicago Blackhawks";

$result = $conn->query("SELECT Number, First, Last FROM `$team`");

echo "<select name='Players'>";

while ($row = $result->fetch_assoc()) {

              unset($number, $first, $last);
              $number = $row['Number'];
              $first = $row['First'];
              $last = $row['Last'];
              $fullname = $first." ".$last;
              echo '<option value="'.$fullname.'">'.$number." - ".$fullname.'</option>';

}

echo "</select>";
?>

The first one has is a list of teams in the NHL. The second one is a list of players from that team. I am trying to make it so that the second one will update when the first one is changed (based on the "value" of the "option"). For this to work, the $team variable in the second snippet of code need to be updated. Since PHP is server-side and cannot be dynamically updated, how would I do this? Even with AJAX the answer doesn't seem obvious. Am i using a flawed approach altogether?

Original Q&A

There are 2 best solutions below

**Kedar B** · Answer 1

Kedar B On 17 June 2015 at 02:51

You have to use ajax on change of first dropdown and call php file from ajax and return data from php file to ajax and display it in second dropdown.

**The KNVB** · Answer 2

First, write a onchange event handler, it use ajax to send the "team" option to server side, then write a php to receive the "team" option from client side, which retrieve the player information from DB,after that reformat the data in XML or json format,send to client side.

Finally, write a javascript function to parse the server side response and update the web page.

This is the logical flow for solving your problem. You may go to google to search the above keyword for sample code.

Here is an simple sample code: HTML file content:

    <html>
  <head>
    <title>PHP/Ajax update 2nd drop down box base on 1st drop down box value</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script language=javascript>
      function updateData(v)
      {
        var value=v.options[v.selectedIndex].value;
        $("#number").empty(); //empty "digit" drop down box
        if (value!="") //Ensure no empty value is submitted to server side
        {
          jQuery.post("getResult.php","type="+value,updateNumber);
        }
      }
      function updateNumber(data)
      {
        var numberData=jQuery.trim(data).split("\n");//split server side response by "\n"
        var number=document.getElementById("number");
        for (i=0;i<numberData.length;i++)
        {
          value=numberData[i].split("-")[0];//get value from server response 
          text=numberData[i].split("-")[1]; //get text from server response 
          option=new Option(text,value);    //for better IE compatibility
          number.options[i]=option;         
        }
      }
    </script>
  </head>
  <body>

    <h1>PHP/Ajax update 2nd drop down box base on 1st drop down box value Demo</h1>
    No number type
    <select id=type name="type" onchange="updateData(this)">
      <option value="">Please select</option>
      <option value="1">Odd No.</option>
      <option value="0">Even No.</option>
    </select>

    Number
    <select id="number" name="number">
    </select>
  </body>
</html>

php file(file name:getResult.php)

    <?php
    $type=htmlspecialchars($_POST["type"]);
    if ($type=="1")
    {
        echo "1-one\n";//Ends-with \n for client side getting data from server side response
        echo "3-three\n";//Ends-with \n for client side getting data from server side response
        echo "5-five\n";//Ends-with \n for client side getting data from server side response
        echo "7-seven\n";//Ends-with \n for client side getting data from server side response
    }
    else
    {
        if ($type=="0")
        {   echo "2-two\n";//Ends-with \n for client side getting data from server side response
            echo "4-four\n";//Ends-with \n for client side getting data from server side response
            echo "6-six\n";//Ends-with \n for client side getting data from server side response
            echo "8-eight\n";//Ends-with \n for client side getting data from server side response
        }
    }       
?>

Fill Dropdown Based on Another's Selection with a Variable/Function

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in AJAX

Related Questions in HTML-SELECT

Related Questions in FORMS

Trending Questions

Popular # Hahtags

Popular Questions