Question

Inside my page I have an input (“Model”) with a datalist attribute and a select menu (“Brand”). When a user select one of the options of the datalist from the Model, it will dynamically change the options value from the Brand select menu. Both options value from Model and Brand are called from the database. This is what I code so far;

<input type="text" name="type" id="type" list="datalist1" onchange="fw();"/>

    <datalist id="datalist1">

         <?php 

      $query9 = "SELECT DISTINCT model FROM server ORDER BY model ASC";
      $result9 = mysql_query($query9);

      while($row9 = mysql_fetch_assoc($result9)) 
      {

      echo '<option value="'.$row9['model'].'">';

     }              ?>

    </datalist>

 <select name="brand" id="test2"><option value="">-- Select Brand--</option></select>

Script;

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fw()
{
var selname = $("#type").val();  
$.ajax({ url: "getBrand.php",

    data: {"brand":brand},

    type: 'post',

    success: function(output) {      

     document.getElementById('test2').options.length = 0;

     document.getElementById('test2').options[0]=new Option(output,output);
        // document.getElementById('test2').options[1]=new Option(output,output);       
    }

 });
}

</script>   

getBrand.php

<?php
define('DB_HOST1', 'localhost');
define('DB_NAME1', 'standby');
define('DB_USER1', 'root');
define('DB_PASS1', '');
$link = mysql_connect(DB_HOST1, DB_USER1, DB_PASS1);
if(!$link)
{
    exit('Cannot connect to server "' . DB_HOST1 . '"');
}

mysql_select_db(DB_NAME1, $link) or die('Cannot use database "' . DB_NAME1 . '"');


if (isset($_POST['brand'])) {   
$selname = $_POST['brand'];

$query = "SELECT * FROM server WHERE model='$brand'";
$res = mysql_query($query);
$aBrand= array();
while($rows = mysql_fetch_assoc($res)) {

$brand= $rows['brand'];

$aBrand[] = $brand; 

echo $aBrand[0];
echo $aBrand[1];
}

}    ?>

From what I have coded, I have succesfully change the select menu dynamically but there is one problem. When there is more one data is called from getBrand.php, the ‘output’ in the select menu will combine all of the data into one line. For example, if the data is “M3000” and “M4000”, it will display as “M3000M4000”. Now, how do I split it and make it as a normal select options?

I’m still learning Javascript and I hope anyone here can guide me.

NOTE : The code only works in Firefox because of the datalist attribute

Answer 1

Send your data from getBrand.php as

echo implode(“;”, $aBrand);

this will generate a string like M3000;M4000;M5000;M6000

and in your java script code break the string into array using this code.

StrArr = Str.split (“;”);

here ‘Str’ is your output given by getBrand.php, and ‘StrArr’ is the array which contains your brands.