javascript - onchange 中的 onchange 不起作用

Question

当我构建 2 个下拉菜单并从数据库中填充它们时，当从第一个下拉菜单中选取一个值时，会创建第二个下拉菜单。但是，当我在第二个选项中选择一个选项时，我的 ajax 正在执行。但是当我在第二个下拉列表中只有一个值时，它将不起作用。即使我手动调用 javascript 函数。

第二个下拉列表:

<?
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>';

?>

我编写/复制的 javascript 函数:

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();
}

从这个 javascript 调用的 phpfile:

<?
$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);

?>

为什么我在选择一个时看到 div“项目”发生了变化，但它在创建时却没有发生变化？

我试图通过将其添加到第一个 php 文件来手动调用该函数。但它也不起作用。

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

抱歉我的英语不好，我希望你能帮我解决这个问题。

Answer 1

这是因为您的第二个下拉列表中只有一个选项。如果下拉列表中只有打开或零选项，则无法触发更改事件。您可以做的是在选择更改时触发您的第一个 Ajax 调用的位置添加此代码。并将您的第二个 Ajax 调用放在下面的代码中。

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.
        }