javascript - 年份制作模型 Javascript HTML 链接到 URL

Question

尝试为每个最终选择创建一个指向不同 URL 的模型下 zipper 接。不知道该怎么做。

示例:一旦选择了 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 产品 = X 和 var 属性 = Y

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

没有构造一个 ULR，

谢谢

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>