How fix this non-user friendly Select menu

when I clicked on the Select menu, The drop-down menu didn’t work properly then.

and after that when again click it again it shows value correctly! with perfect one.

Now what I think that may be reason of impairing of select menu style is I’m using Ajax for calling data dynamically

Here is my code for calling data

  function getRoutes(num){    

     // var id = document.getElementById('route').value;

      var req = new XMLHttpRequest();
      req.onreadystatechange = function(){

          if(req.readyState==4 && req.status==200){
              document.getElementById("route"+num).innerHTML = req.responseText;



and in same form when I call data using Core PHP it work perfectly fine!

The drop-down menu didn’t work properly then, I tried so many times exactly the same thing but sometimes it’s working or some time it’s not working properly so could you please tell me the reason why I facing this happening and give me the solution as well.

As you say that the PHP code works fine if called directly, I’ve moved this to the JavaScript section.


yes sure

When are you making that function call?


What element is “route”+num pointing to? The second <select>?
What is being returned by your PHP page? Is it valid HTML?

In OnFocus Envent

Yes correct

this is pointing second select menu like when I call getRoutes(1) It will append the return to first select menu and so on.

And yes the return is valid HTML here is my PHP code


if (isset($_GET['r'])) {

	if ($_GET['r'] == 'return') {

		require_once '';

	$sql = "SELECT p_name,r_a FROM routes";

    $result = mysqli_query($conn,$sql);

    $resultCheck = mysqli_num_rows($result);

	if ($resultCheck > 0){
		while ($row = mysqli_fetch_assoc($result)) {

			    echo "<option value='{$row['r_a']}'>{$row['p_name']} </option>";








		echo "Cant acces this right Now!";



I’ll try to limit myself to the JavaScript.

The code has

document.getElementById("route"+num).innerHTML = req.responseText; 

but I don’t see any HTML element with that id.

Please post the HTML of a small representative form.

onfocus? How is it supposed to know what the user is going to choose ahead of time? Surely you want the change event? Meaning when the first box is chosen, the second gets filled in with options?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.