选择第一个选择选项后的 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？谢谢

更新

这是我根据帕特里克先生的回答制作的小提琴

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

Answer 2

我已经测试过了，按你的要求工作

<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'>
    </select>

    <input type="submit" value="Submit">
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$('#from').on('change', function(){
    var html = '';
    var current_id = $(this).val();
    $('#from option').each(function(){
        if(current_id != $(this).val()){
            html += '<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
        }
    });

    $('#to').html(html);
});
</script>