Year Make Model Javascript HTML链接到URL

Question

尝试用一年的时间为每个最终选择建立一个指向不同URL的模型下拉链接。 不知道该怎么做。

示例：选择1975和CB400F后，浏览器将定向到URL，例如motorcyclewebsite.com/CB400F0-SUPER-SPORT-1975-USA/

 $(document).ready(function(){ $('select[name*="[]"]').each(function(){ var attribute = { '1975': ['Choose Model', 'CB400F', 'CB550F', 'CB750F', 'GL1000'], '1976': ['Choose Model', 'CB400F','CB125', 'CL350K', 'EZ50', 'Gyro'], '1977': ['Choose Model', 'CB400F', 'CX500', 'GL650', 'XL100'], } $('select[name*="[]"]').change(function () { var $attribute = $(this).next('.attribute'); var product = $(this).val(), lcns = attribute[product] || []; var html = $.map(lcns, function(lcn){ return '<option value="' + lcn + '">' + lcn + '</option>' }).join(''); $attribute.html(html); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="input" action="test.php" method="post"> <div class="options"> <select name="product[]" class="custom-select form-control-sm product"> <option value="Select Year">Select Year</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> </select> <select name="att[]" class="custom-select form-control-sm attribute"> </select> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> 

谢谢你的帮助

更新：有谁知道如何使一个简单的JavaScript说：

如果var product = X并且var attribute = Y

然后转到位置HTTPS：// .........

无需构建ULR，

谢谢

Answer 1

如果我正确理解了您的问题，那么您应该可以通过添加以下.change()处理程序中列出的以下代码来实现此.change() ：

 $(document).ready(function(){ // When either of the select values change, check for valid values on each: $('select').change(function() { var product = $('select.product').val(); var attribute = $('select.attribute').val(); // If valid values for both selects, then construct the URL and relocate the page // to that URL if(product && attribute) { console.log('loading http://motorcyclewebsite.com/'+attribute+'-SUPER-SPORT-'+product+'-USA/') location = 'http://motorcyclewebsite.com/'+attribute+'-SUPER-SPORT-'+product+'-USA/'; } }); $('select[name*="[]"]').each(function(){ var attribute = { '1975': ['Choose Model', 'CB400F', 'CB550F', 'CB750F', 'GL1000'], '1976': ['Choose Model', 'CB400F','CB125', 'CL350K', 'EZ50', 'Gyro'], '1977': ['Choose Model', 'CB400F', 'CX500', 'GL650', 'XL100'], } $('select[name*="[]"]').change(function () { var $attribute = $(this).next('.attribute'); var product = $(this).val(), lcns = attribute[product] || []; var html = $.map(lcns, function(lcn){ return '<option value="' + lcn + '">' + lcn + '</option>' }).join(''); $attribute.html(html); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="input" action="test.php" method="post"> <div class="options"> <select name="product[]" class="custom-select form-control-sm product"> <option value="Select Year">Select Year</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> </select> <select name="att[]" class="custom-select form-control-sm attribute"> </select> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>