HTML选择框选项：在第一个选项被选择后显示列表

Question

HTML选择框选项：在第一个选项被选择后显示列表

3

我有这个国家表：

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

更新

这是基于Patrick先生的答案的我的fiddle

jsfiddle

- junior

我会使用jQuery或JavaScript。 - The One and Only ChemistryBlob

你能给一个代码示例吗？ - junior

2个回答

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>

- Surjit Sidhu

@SurjitSidhu 做得好！但如果步骤超过两步，并且你回到第一步更改 - 所有其他输入都将被重置。 - Patrick Geyer

请在此处编辑：http://jsfiddle.net/surjitsidhu/z2Tep/2/ 如果您遇到任何错误，请告诉我，我会修复它。 - Surjit Sidhu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Patrick Geyer · Accepted Answer

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