Using Ajax, jQuery and PHP in two dropdown lists

Question

I am trying to populate second dropdown list based on first dropdown list selection using Ajax, jQuery, PHP and MySQL. The problem is the options in second dropdown list just appears in one line (all options in one line)!

I was hoping the while loop inside the results.php could handle this but it seems not. How can I fix this issue?

Here is my code:

<html>
<body>
<?php
$mysqli = new mysqli('localhost', 'root', '', 'chain');
if ($mysqli->connect_errno) 
{
die('Unable to connect!');
}
else
{
$query = 'SELECT * FROM Cars';
if ($result = $mysqli->query($query)) 
 {
 if ($result->num_rows > 0) 
    {
 ?> 
 <p>
  Select a Car
<select id="selectCar">
<option value="select">Please Select From The List</option>
    <?php       
     while($row = $result->fetch_assoc()) 
   {
   ?>       
   <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?></option>      
  <?php         
}
  ?>
 </select>
 </p>
<select>
    <option value="select">Please Select From The List</option>
    <option id="result"></option>
    </select>
    <?php
    }
    else 
    {
        echo 'No records found!';
    }
    $result->close();
}
else 
{
    echo 'Error in query: $query. '.$mysqli->error;
}
    }
     $mysqli->close();
    ?>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#selectCar').change(function()
            {
                if($(this).val() == '') return;
                $.get(
                    'results.php',
                    { id : $(this).val() },
                    function(data)
                    {
                        $('#result').html(data);
                    }
                );
            });
        });
    </script>
      </body>
      </html>

In the PHP result I have:

<?php
 $mysqli = new mysqli('localhost', 'root', '', 'chain');
 $resultStr = '';
 $query = 'SELECT * FROM models WHERE carID='.$_GET['id'];
 if ($result = $mysqli->query($query)) 
 {
if ($result->num_rows > 0) 
{
    while($row = $result->fetch_assoc())
    {
  $resultStr.=  '<option    value="'.$row['id'].'">'.$row['model'].'</option>'; 
    }
}
else
{
 $resultStr = 'Nothing found';
}
   }
    echo $resultStr;
   ?>

Aldry Wijaya · Accepted Answer · 2012-12-13 09:32:15Z

1

You should edit your script into this..

<select id="result">
  <option value="select">Please Select From The List</option>
</select>

answered Dec 13, 2012 at 9:32

Aldry Wijaya

4252 gold badges4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefan S · Accepted Answer · 2012-12-13 09:27:08Z

1

You are setting $('#result').html(data); in the main file.

result should be the id of the HTML select element, you used it as id for the an option element.

(You are appending the values into the option element, which doesn't create new HTML elements, but they should be inserted into the select element.)

answered Dec 13, 2012 at 9:27

Stefan S

6472 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using Ajax, jQuery and PHP in two dropdown lists

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related