Javascript选择框选项取决于选择的其他选择框选项

我有个问题。我想在我的网页上做这件事： 1.我有这样的选择框

 <select name="firstbox" id="#firstbox">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>  

二,。我有一个选择框，其中的选项取决于第一个框，因此如果我在第一个框中选择选项1，我将让我们这样说：

 <select name="secondbox" id="#secondbox">
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>  

如果我选择选项2，我会说

<select name="secondbox" id="#secondbox">
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
</select>

基于这两个选择框，我需要一个链接，根据这两个链接改变url。所以，如果firstbox=1和secondbox=2链接中的选项是first.html，则会出现这种情况

<a href="first.html" id="link" >Show </a>

---

我不知道它在javascript中是否可行，或者使用PHP和小型数据库是否更好、更流畅。。。但我仍然不知道在这种情况下如何改变该按钮的链接。。。希望有人有想法。

或者，如果您选择使用jQuery，当然可以使用onchange事件。但首先，您需要设置一个简单的默认值，其中，它取决于您选择的内容。考虑这个例子：

<select name="firstbox" id="firstbox" style="width: 100px;">
    <option disabled selected>Select Value</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="select_boxes"></div>
<div id="link"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

var default_values = {
    "1": {"label": "first","values": [4,5]},
    "2": {"label": "second","values": [8,9]},
    "3": {"label": "third","values": [6,7]}
};

$(document).ready(function(){

    $('#firstbox').on('change', function(){
        var current = $(this).val();
        $('#select_boxes').html('<select name="secondbox" id="secondbox" style="width: 100px;"></select>');
        var options = '';
        $.each(default_values[current].values, function(index, values){
            options += '<option value="'+values+'">Option '+values+'</option>'; // fetch options
        });
        $('#secondbox').html(options); // add options
        $('#link').html('<a href="'+default_values[current].label+'.html" id="link">show</a>');
    });

});
</script>

---

可以使用AJAX在第二个选择框中仅显示所需的选项。我猜这个链接应该只有在两个选择框都被操作的情况下才可用，这样你就可以添加一个onchange=。。。到第二个选择框，该框调用一个javascript函数，该函数创建或修改linkwow。。。该seconbox在启动或关闭时不可见？顺便说一句，若链接对于框的组合是不同的，那个么代码会是什么呢。所以框1选项1和框2选项让我们假设4链接不同于框1选项1和框2选项5？如果你得到我。。。非常感谢。。真的很好code@Emanuel关于secondbox，您只需初始化一个空的选择框，在当前示例中，在更改第一个选择框时，将动态创建第二个选择元素。所以只需添加一个新的空值，你需要做一些调整，如果你想要一系列的组合，你必须根据自己的喜好更改默认值。