如何进行多个选择步骤以根据所选选项显示链接？ [关闭]

Question

我想根据选择创建订单页面。 我有 4 种产品。用户首先需要选择国家，然后选择产品类型。

需要有步骤。 第 1 步：用户应选择国家选项（1 或 2） 第 2 步：用户应选择产品类型（A 或 B）

因此，根据此选择，“立即购买”链接需要根据选择进行更改。比如 1&A 链接，或 2&A 链接，或 1&B 链接。

是否可以使用 bootstrap 或 jquery 来做到这一点？

Answer 1

对于<select>，可以尝试使用jQuery方法change()。

The idea is, when a certain value is selected, then we do this.如果选择了另一个，我们就会这样做。

我会将 cmets 留在代码中，以便您了解每一行的作用。

试试这个：

$(document).ready(function(){


  // This is when this select is selected, it opens the country select.
  $('#country').on('change',function(){
    $("#other").css("display","block");
  });



  // First, lets check if the dropdown has an onChange that took place
  $('#other').on('change',function(){
  
    // Store the value of the selected option into a variable
  	var selectedCountry = $("#other option:selected").val();
    
    // If that option is 1, then we make the button block so it appears, we change the href link to your desired URL as well as change the text for that button. You can remove whichever feature you don't want.
    if(selectedCountry==1) {
      $("#cart").css("display","block");
      $("#cart").attr("href", "#");
      $("#cart").html('Add To Cart - Singapore');
  	} 
    
    // Use else if if the option is 2, then do the following as mentioned above.
    else if(selectedCountry==2) {
    	$("#cart").css("display","block");
      $("#cart").attr("href", "#");
      $("#cart").html('Add To Cart - USA');
    } else {
      // If its not 1 or 2, then make button disappear again , so that when someone clicks on an option and deciddes to go back to default Please select option, the add to cart will disappear.
      $("#cart").css("display","none");
      }
  });
});

#cart {
  display: none;
}

#other {
  display: none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="country">
  <option value="0">Please Select</option>
  <option value="1">Singapore</option>
  <option value="2">USA</option>
</select>

<select id="other">
 <option value="0">Please Select</option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>

<button id="cart"></button>