onchange中的onchange将不起作用

Question

When I am building 2 dropdowns filling them from the database, the second dropdown is created when a value is picked from the first dropdown. But then, when I select an option in the second, my ajax is being executed. But when I have only one value in the second dropdown, it won't work. Even if I call the javascript function manualy.

The 2nd dropdown:

<?
include ('../dbconnect.php');
$query = "CALL get_projects(".$userid.",".$q.")";

$result = mysql_query($query);
$countprojects = mysql_num_rows($result);

if ($countprojects != 0){

    echo '<select class="form-control" onchange="showContent(this.value)">'."\n";
    if ($countprojects > 1){
        echo "<option value='none' selected>Select project</option>";
    }
    while($rowprojecten = mysql_fetch_assoc($result)){
        echo '<option value='.$rowprojecten['projectID'].'>'.$rowprojecten['projectname'].'</option>';
        $lastvalue = $rowprojecten['projectID']; // see below why i did this
    }

    echo '</select>';

?>

the javascript function I wrote/copied:

function showContent(str)
{
if (str=="")
  {
  document.getElementById("project").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("project").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","./includes/ajax/getcontent.php?q="+str,true);
xmlhttp.send();
}

The phpfile what is called from this javascript:

<?
$q = intval($_GET['q']);

include ('../dbconnect.php');

$query = "CALL get_project(".$userid.",".$q.")";

$return = '<div id="project">';
$return .= $query;
$return .= '</div>';

echo $return;

mysql_close($con);

?>

Why do I see the div 'project' change when I select one, but does'nt it change when it is created?

I tried to call the function manualy with adding this to the first php file. But it also doesn't work.

if ($countprojects == 1){ 
  echo '<script type="text/javascript">
        showContent('.$lastvalue.')
        </script>';
}

sorry for my bad english, I hope you can help me solve this.

Answer 1

This is because there is only one option in your second drop down list. you cannot fire change event if there is only on or zero options in drop down list. what you can do is add this code where your first Ajax call get fired when selection changes. and place your second Ajax call in inside below code.

if ($('#selectproject').children().length == 1) {

            // make sure you have imported latest jquery. if not add this inside HTMl head  : <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
            var selectedProject = $('#selectproject').children()[0].value;
            showContent(selectedProject); // i hope this is the function you are calling when executing. if not please replace your function call here.
        }