javascript - js 根据所选的其他选项显示选项-6ren

javascript - js 根据所选的其他选项显示选项

转载作者：行者123 更新时间：2023-11-29 22:05:32

26

4

我有一个包含航运公司的选择字段，如下所示

<select>
    <option >cma</option>
   <option>uafl</option>
</select>

另一个包含船舶的选择字段如下

<select>
    <option >apulia</option>
    <option>costa</option>
    <option >beinjin</option>
    <option>union</option>
</select>

当用户选择航运公司(如 CMA)时，我希望选择包含船舶的选项，以仅显示与 CMA 关联的船舶(如 COSTA 和 BEINJIN)

这些数据将从mysql数据库中提取。

请帮忙，我将非常感激。谢谢。

最佳答案

注意:

您需要使用Ajax实现你的目标
我将使用 jQuery，这是一个 javascript 库，您可以下载 here然后将其存储在您的项目文件夹中

代码(select.php):

<html>
<head>
  <script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY JS FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
  <script type="text/javascript">

    $(document).ready(function(){ /* START JQUERY */
      $("#base-select").change(function(e){ /* EVERYTIME A SHIP IS SELECTED */
        e.preventDefault(); /* PREVENT FROM REFRESHING THE PAGE */
        var base = $("#base-select").val(); /* STORE THE SELECTED SHIP TO THIS VARIABLE */
        var dataString = "base="+base; /* STORE THE DATA IN A DATA STRING */

        $.ajax({ /* START THE AJAX */
          type: "POST", /* METHOD YOU WILL BE USING TO SUBMIT VALUE OF THE SELECTED SHIP */
          url: "get-options.php", /* THE TARGET FILE ON WHERE YOU WILL PASS THE VALUE OF THE SELECTED SHIP */
          data: dataString, /* THE DATA YOU WILL BE PASSING */
          success: function(result){
            $("#select").empty().append(result); /* CLEAR THE CURRENT OPTIONS OF THE SECOND SELECT FIELD AND UPDATE DEPENDING ON THE SELECTED SHIPS */
          } /* END OF SUCCESS */
        }); /* END OF AJAX */

      }); /* END OF CHANGE FUNCTION */
    });

  </script>
</head>

<body>

  <select id="base-select">
    <option disabled selected>Select Shipping Line</option>
    <option value="1">CMA</option>
    <option value="2">UAFL</option>
  </select>

  <select id="select">
    <option disable>Select first a Shipping Line</option>
  </select>

</body>
</html>

获取选项.php:

<?php

  if(!empty($_POST["base"])){
    if($_POST["base"] == 1){
      ?>
        <option>COSTA</option>
        <option>BEIJIN</option>
      <?php
    }
    else if($_POST["base"] == 2){
      ?>
        <option>APULIA</option>
        <option>UNION</option>
      <?php
    }
  }    

?>

关于javascript - js 根据所选的其他选项显示选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32175648/

26

4

0

文章推荐： php - 在另一个 mysql 查询 while 循环中调用 mysql 查询

文章推荐： javascript - 由于不明原因缺少一些 highcharts 类别

文章推荐： android - 如何在未显示上下文菜单时停止将长按作为短按处理

generics - Swift 泛型函数(n 选 k)
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止，我在 Swift 中有这个: import Foundation import Cocoa e

首页

博学

6Ren·AI

商城

javascript - js 根据所选的其他选项显示选项

注意: