php - 3つの動的ドロップダウンのJavascript

Question

私は製造年式の自動車データベースに取り組んでおり、製造元に基づいてモデルを選択する次のフォームがあります。

    <? 

 $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>

3 番目のドロップダウンボックスに製造元とモデルに基づいて年を表示するには、javascript コードとフォームコードを追加する必要があります。

ご協力ありがとうございます。

これは、年のドロップダウンを入力して選択するための更新された 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>

score 1 · Accepted Answer

あなたの質問に答えるために、あなたのコードはそれが機能するなら正しいです:)。ただし、このコードは少し複雑になっているため、改善する方法をいくつか提供するかもしれません。

まず、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 ステートメントが 1 行のみであることがわかります。また、エンドステートメント ( endfor、など) の方がはるかに読みやすいため、コロン形式のステートメントのブレース形式は避けています。また、単一のステートメントでは行末にセミコロンを付ける必要がないため、マークアップが少し明確になります。endwhileendforeach

また、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 サーバールックアップが必要になる場合があります。そうでない場合は、データを配列としてレンダリングし (ここでは PHPjson_encodeが便利です)、ループ構造を使用して JavaScript でアクセスします。

php - 3つの動的ドロップダウンのJavascript

1 に答える 1

Related

Reference