我有这张国家表:
+----+-----------+
| ID | Country |
+----+-----------+
| 1 | Indonesia |
| 2 | Malaysia |
| 3 | Brunei |
+----+-----------+
和这个表格:
<form action="search.php" method="post" accept-charset="utf-8">
<label>From:</label>
<select name="from_country">
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Brunei</option>
</select>
<label>To:</label>
<select name="to_country">
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Brunei</option>
</select>
<input type="submit" value="Submit">
</form>
这两个选择选项数据都是从我数据库中的国家表中填充的,我想做的是:
我希望在选择第一个 (from_country) 之前第二个选择选项 (to_country) 列表为空
在选择第一个 (from_country) 之后,第二个选择选项 (to_country) 列表仅生成尚未被第一个选择的选项 (from_country) 选择的列表。所以就像我在第一个选择选项 (from_country) 中选择印度尼西亚时,印度尼西亚不会显示在第二个选择选项中,除非我将第一个选项更改为另一个国家/地区。
该怎么做?我应该使用 php 还是 jquery?谢谢
已更新
这是我根据帕特里克先生的回答做出的 fiddle
最佳答案
使用 jQuery,因为 PHP 是服务器端。
<form action="search.php" method="post" accept-charset="utf-8">
<label>From:</label>
<select name="from_country" id='from'>
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Brunei</option>
</select>
<label>To:</label>
<select name="to_country" id='to'>
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Brunei</option>
</select>
<input type="submit" value="Submit">
</form>
<script>
$('#from').on('change', function() { //WHEN USER CHANGES FIRST OPTION
var fromVal = $(this).val(); //MAKE VARIABLE OF SELECTED CHOICE
$('#to option').each(function(){ //FOR EVERY SECOND OPTION
if($(this).val() == fromVal) { //CHECK IF IT IS EQUAL TO THE FIRST SELECTED CHOICE
$(this).attr('disabled', 'disabled'); //IF IT IS, HIDE IT
alert($(this).val());
} else {
$(this).removeAttr('disabled'); //OTHERWISE SHOW IT, INCASE HIDDEN FROM PREVIOUS CHOICE
}
});
});
</script>
关于php - 选择第一个选择选项后的 HTML 选择选项显示列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23458310/