php - 选择第一个选择选项后的 HTML 选择选项显示列表

Question

我有这张国家表:

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

这两个选择选项数据都是从我数据库中的国家表中填充的，我想做的是:

1. 我希望在选择第一个 (from_country) 之前第二个选择选项 (to_country) 列表为空

2. 在选择第一个 (from_country) 之后，第二个选择选项 (to_country) 列表仅生成尚未被第一个选择的选项 (from_country) 选择的列表。所以就像我在第一个选择选项 (from_country) 中选择印度尼西亚时，印度尼西亚不会显示在第二个选择选项中，除非我将第一个选项更改为另一个国家/地区。

该怎么做？我应该使用 php 还是 jquery？谢谢

已更新

这是我根据帕特里克先生的回答做出的 fiddle

jsfiddle

Answer 1

使用 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>

JSFiddle