我有一个问题。我想在我的网页上做这件事: 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>
2.我有一个选择框,其中的选项取决于第一个框,所以如果我在第一个框中选择选项 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 中的 IF 选项,而 secondarybox=2 #link 是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>
关于Javascript SELECT BOX 选项依赖于所选的其他 SELECT BOX 选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24428771/