gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 22:05:32 26 4
gpt4 key购买 nike

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

<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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com