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>

两个选择选项数据都是从我的数据库中的国家/地区表中填充的，我想要做的是：

我希望第二个选择选项（to_country）列表在选择第一个选项（from_country）之前为空
在选择第一个选项（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>

选择第一个选择选项后，HTML选择选项显示列表

2 个答案: