Question

我有一个按钮，单击该按钮会将您指向另一个html页面。目前，我无法确定是否在使用javascript或jquery的点击事件上遇到问题。差不多，当我单击并且选择标签中没有任何项目时，然后弹出警报。否则，请继续正常导航至下一页。感谢您提供任何反馈意见。

$(document).ready(function() {
  $("#showDangerAlert").click(function() { 
    $(this).show(); $(this).hide(); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDangerAlert" class="alert alert-danger" role="alert" style="text-align: center">
    You have not selected a Delivery Option! Please choose one to proceed.
</div>

<select id="colorselector" class="custom-select d-block mb-3">
  <option value="red">Select...</option>
  <option id="shipToAddress" value="yellow">Ship to Address</option>
  <option id="inStorePickup" value="blue">In-Store Pickup</option>
</select>

<div id="yellow" class="colors">
  <a href="shoppingCart.html" class="btn btn-primary mx-auto mb-3 cartLink">
    Add to Cart 
    <span class="fa fa-shopping-cart"></span>
  </a>
</div>
<div id="blue" class="colors">
  <small class="mb-3">You will select your desired store during   
    <strong>checkout.</strong>
    <span> 
      <a href="#" data-target="#storeListing" data-toggle="modal"> 
        <span class="fa fa-map-marker"></span> 
        See available stores near you.          
      </a>
    </span>
    <a id="inStorePickupRedirect" href="shoppingCart_inStorePickup.html" class="btn btn-primary mx-auto my-3 cartLink">
      Add to Cart 
      <span class="fa fa-shopping-cart"></span>
    </a>
  </small>
</div>

Answer 1

您可以使用JQuery附加单击事件，并检查用户是否对选择项进行了某些选择。如果用户选择了某些内容，请使用javascript进行导航。

$('#button').on('click', function (e) {
    if ($('#selector_id').val() != no_selected_value) {
       window.location = "/your_page";
    } else {
       $('#showDangerAlert').show();
    }
});

因此您的情况下no_selected_value应该是红色/黄色或蓝色。

编辑

如上所述，我已对您的代码进行了一些更改，使其可以正常工作。

$(document).ready(function() {
  $("#showDangerAlert").hide();
  $("#showDangerAlert").click(function() { 
    $(this).hide(); 
  });
});

$('#button').on('click', function (e) {
    if ($('#colorselector').val() != 'red') {
       window.location = "/shoppingCart.html";
    } else {
       $('#showDangerAlert').show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDangerAlert" class="alert alert-danger" role="alert" style="text-align: center">
    You have not selected a Delivery Option! Please choose one to proceed.
</div>

<select id="colorselector" class="custom-select d-block mb-3">
  <option value="red">Select...</option>
  <option id="shipToAddress" value="yellow">Ship to Address</option>
  <option id="inStorePickup" value="blue">In-Store Pickup</option>
</select>

<div id="yellow" class="colors">
  <button id="button" class="btn btn-primary mx-auto mb-3 cartLink">
    Add to Cart 
    <span class="fa fa-shopping-cart"></span>
  </button>
</div>
<div id="blue" class="colors">
  <small class="mb-3">You will select your desired store during   
    <strong>checkout.</strong>
    <span> 
      <a href="#" data-target="#storeListing" data-toggle="modal"> 
        <span class="fa fa-map-marker"></span> 
        See available stores near you.          
      </a>
    </span>
    <a id="inStorePickupRedirect" href="shoppingCart_inStorePickup.html" class="btn btn-primary mx-auto my-3 cartLink">
      Add to Cart 
      <span class="fa fa-shopping-cart"></span>
    </a>
  </small>
</div>

Answer 2

如果未选择任何选项，则将警告未选择任何选项否则，您可以做任何您想做的事。相同的代码可以使用 JavaScript，只需更改选择器即可。

$("#btncheck").on("click",function(){
      if($("#mySelect")[0].selectedIndex <= 0){
        alert("No Option Selected")
      } else {
        alert("Option Selected")
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="mySelect">
      <option>Select</option>
      <option value="1">First</option>
      <option value="2">Second</option>
      <option value="3">Third</option>
      <option value="4">Fourth</option>
    </select>
    <input type="button" id="btncheck" value="check"/>

Answer 3

$(document).ready(function() {
  $('#showDangerAlert').show();
  $("#colorselector").change(function() { 
  var sel = $("#colorselector option:selected").val();
    if(sel=='red') {$('#showDangerAlert').show();} else {$('#showDangerAlert').hide();}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDangerAlert" class="alert alert-danger" role="alert" style="text-align: center">
    You have not selected a Delivery Option! Please choose one to proceed.
</div>

<select id="colorselector" class="custom-select d-block mb-3">
  <option value="red">Select...</option>
  <option id="shipToAddress" value="yellow">Ship to Address</option>
  <option id="inStorePickup" value="blue">In-Store Pickup</option>
</select>

<div id="yellow" class="colors">
  <a href="shoppingCart.html" class="btn btn-primary mx-auto mb-3 cartLink">
    Add to Cart 
    <span class="fa fa-shopping-cart"></span>
  </a>
</div>
<div id="blue" class="colors">
  <small class="mb-3">You will select your desired store during   
    <strong>checkout.</strong>
    <span> 
      <a href="#" data-target="#storeListing" data-toggle="modal"> 
        <span class="fa fa-map-marker"></span> 
        See available stores near you.          
      </a>
    </span>
    <a id="inStorePickupRedirect" href="shoppingCart_inStorePickup.html" class="btn btn-primary mx-auto my-3 cartLink">
      Add to Cart 
      <span class="fa fa-shopping-cart"></span>
    </a>
  </small>
</div>

jQuery或JavaScript，如果未做出选择，则警告单击按钮

3 个答案: