Year Make Model Javascript HTML链接到URL

时间:2018-09-10 20:24:23

标签: javascript html url drop-down-menu

尝试用一年的时间,将模型下拉链接链接到每个最终选择的不同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属性= Y

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

没有构造ULR,

谢谢

1 个答案:

答案 0 :(得分:0)

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