Question

我正在制作一个make model year car数据库，我有以下表格，根据make选择模型。

    <? 

 $hostname = "";
 $database = "";
 $username = "";
 $password = "";

 $mysql_link = mysql_connect($hostname,$username,$password) or die ("can't connect to mysql");
 $mysql_select = mysql_select_db($database,$mysql_link) or die ("can't select db");
  ?> 

 <html> 
 <head> 
 <title>Dynamic Dropdown</title> 
 <script language="javascript"> 
 function setOptions(chosen) { 
   var selbox = document.myform.selectmodel; 

   selbox.options.length = 0; 
   if (chosen == "0") { 
     selbox.options[selbox.options.length] = new Option('First select a car','0');

   } 
   <? 
   $car_result = mysql_query("SELECT * FROM make") or die(mysql_error()); 
   while(@($c=mysql_fetch_array($car_result))) 
   { 
   ?> 
     if (chosen == "<?=$c['make'];?>") { 

     <? 
     $c_id = $c['make']; 
     $mod_result = mysql_query("SELECT * FROM model WHERE make='$c_id'") or die(mysql_error());
      while(@($m=mysql_fetch_array($mod_result))) 
     { 
     ?> 
       selbox.options[selbox.options.length] = new 
       Option('<?=$m['model'];?>','<?=$m['model'];?>'); 
     <? 
     } 
     ?> 
     } 
   <? 
   } 
   ?>  
   } 
  </script> 
  </head> 
  <body> 
 <form name="myform"><div align="center"> 
 <p>
     <select name="selectcar" size="1" 
     onchange="setOptions(document.myform.selectcar.options 
      [document.myform.selectcar.selectedIndex].value);"> 
       <option value="0" selected>Select a car</option> 
      <? 
     $result = mysql_query("SELECT * FROM make") or die(mysql_error()); 
     while(@($r=mysql_fetch_array($result))) 
      { 
      ?> 
       <option value="<?=$r['make'];?>">
          <?=$r['make'];?>
       </option> 
       <? 
      } 
    ?> 
     </select>
       <br>
        <br> 
   <select name="selectmodel" size="1"> 
     <option value=" " selected>First select a car</option> 
    </select>
     <br>
     <br>
      <select name="optthree" size="1">
       <option value=" " selected="selected">Please select one of the options  above               first</option>
      </select>
         </p>
       <p>
           <input type="button" name="go" value="Value Selected" 
        onclick="alert(document.myform.selectmodel.options 
     [document.myform.selectmodel.selectedIndex].value);"> 
         </p>
    </div></form> 
      </body> 
    </html>

我需要添加javascript代码和表单代码，以使第3个下拉框显示基于品牌和型号的年份。

感谢您的协助。

以下是填充的更新javascript并选择年份下拉列表

 <script language="javascript"> 
  function setOptions(chosen) { 
  var selbox = document.myform.selectmodel; 

      selbox.options.length = 0; 
    if (chosen == "0") { 
         selbox.options[selbox.options.length] = new Option('First select a car','0');

      } 
     <? 
       $car_result = mysql_query("SELECT * FROM make") or die(mysql_error()); 
     while(@($c=mysql_fetch_array($car_result))) 
      { 
     ?> 
         if (chosen == "<?=$c['make'];?>") { 

           <? 
         $c_id = $c['make']; 
              $mod_result = mysql_query("SELECT * FROM model WHERE make='$c_id'") or die                   (mysql_error());
   while(@($m=mysql_fetch_array($mod_result))) 
     { 
  ?> 
         selbox.options[selbox.options.length] = new 
       Option('<?=$m['model'];?>','<?=$m['model'];?>'); 
     <? 
     } 
      ?> 
     if (chosen == "<?=$m['make'];?>") { 

    <? 
     $m_id = $c['make']; 
       $mod_result = mysql_query("SELECT * FROM year WHERE make='$c_id' AND model='$m_id'") or    die(mysql_error());
          while(@($y=mysql_fetch_array($year_result))) 
      { 
        ?> 
        selbox.options[selbox.options.length] = new 
      Option('<?=$y['year'];?>','<?=$y['year'];?>'); 
      <? 
           } 
     <? 
    } 
   ?> 
    } 
   </script>

Answer 1

要回答您的问题，如果代码有效:)，则代码是正确的。然而，这段代码变得有点复杂，所以也许我可能会提供一些方法来改进它。

首先，您正在混合使用HTML和PHP，这使得很难跟踪正在发生的事情 - 如果切换到模板引擎，处理起来会容易得多。一个很好的方法是将所有PHP移动到PHP文件的开头，然后很容易移动到单独的文件。请考虑以下代码：

 <select name="selectcar" size="1" 
 onchange="setOptions(document.myform.selectcar.options 
  [document.myform.selectcar.selectedIndex].value);"> 
   <option value="0" selected>Select a car</option> 
  <? 
 $result = mysql_query("SELECT * FROM make") or die(mysql_error()); 
 while(@($r=mysql_fetch_array($result))) 
  { 
  ?> 
   <option value="<?=$r['make'];?>">
      <?=$r['make'];?>
   </option> 
   <? 
  } 
?> 
 </select>

我将如何做到这一点：

<?php /* Start of document * ?>
<?php 
$result = mysql_query("SELECT * FROM make") or die(mysql_error()); 

// Other PHP...
?>

<!-- HTML here -->

<select
    name="selectcar"
    size="1" 
    onchange="setOptions(document.myform.selectcar.options[document.myform.selectcar.selectedIndex].value);"
>
    <option value="0" selected>Select a car</option> 
    <?php while ($r = mysql_fetch_array($result)): ?>
        <option value="<?php echo $r['make'] ?>">
            <?php echo $r['make'] ?>
        </option>
    <?php endwhile ?>

你可以在这里看到，在HTML标记中，所有PHP语句都只是单行，我避开了冒号形式的括号形式，因为结束语句（endfor，endwhile ，endforeach等更容易阅读）。此外，单个语句不需要使用分号行结束，这样可以获得更清晰的标记。

我也只使用PHP开头语句的长格式（<?php），因为可以在服务器配置中关闭简短格式，因此在服务器之间不能轻松移植。

我不建议您使用@错误抑制机制，因为它可能会导致您在上线之前错过错误。最好在本地计算机上彻底测试代码，并关闭实时服务器上的屏幕错误报告。此外，如果可以，请切换到更好的数据库库 - 不推荐使用mysql库，并且将从未来的PHP版本中删除。

内联事件属性不是HTML5（onchange等）的一部分，尽管由于遗留原因它们可以在浏览器中使用。因此，最好使用不引人注目的事件附加，例如jQuery：

$('select[name=selectcar]').change(function() { .. });

您的JavaScript声明目前不会通过W3C验证。而不是这个：

<script language="javascript">

你需要这个：

<script type="text/javascript">

接下来，您的JavaScript是动态生成的，这将使调试变得非常痛苦。最好将它写成纯文本，根本不包含PHP，然后使用PHP中的数组作为输入数据。（在JavaScript中有PHP的用例，但我建议你暂时避免使用它。）

我会说setOptions() JavaScript函数的目的不明确。看起来您正在列出数据库的内容，然后在不使用客户端循环的情况下进行一整套比较。在这里，我建议您拍摄项目的快照（理想情况下是使用Git等VCS，但是文件夹副本没有问题），然后重写此位。

我不能在这里提出太多建议，因为不清楚你要做什么。请记住，就目前而言，JavaScript比较中的菜单数据仅在提供页面时才是正确的。如果每个下拉列表都依赖于前一个下拉列表的值，那么您可能需要一个AJAX服务器查找，正如我在评论中所说的那样。如果没有，那么将数据呈现为数组（PHP的json_encode在这里很有用），然后使用循环结构在JavaScript中访问它。

Javascript for 3动态下拉菜单

1 个答案: