年制作模型Javascript HTML链接到URL

Question

尝试创建一年为每个最终选择创建一个模型下拉链接到不同的URL。不知道怎么做。

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

$(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：// .........

没有它构建一个URL，

谢谢

Answer 1

如果我正确理解了您的问题，那么您应该可以通过添加以下.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>