Год создания модели 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() ниже:

$(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>