时间戳

首页 > 解决方案 > 单击按钮后检查所选选项

javascript - 单击按钮后检查所选选项

问题描述

当有人点击按钮时，我试图弹出一个警报。“请选择尺寸”。我想检查是否选择了尺寸，如果是，按钮将起作用，否则显示警报。

这是我的功能：

<script type="text/javascript">
  function SelectSize() {
    if ($('#SelectSize').is(':selected')) {  
    }
    else {
      alert('Please Select Size');
      return false; 
    }
  }
</script>

这是HTML：

<select name="size"
        id="selectSize"
        class="form-control form-control-select"
        id="group_1"
        style="display:block;">
  <option value="">Select Size</option>
 @foreach($landing->attributes as $size)
  <option value="{{$landing->id}}-{{$size->size}}">{{$size->size}}</option>
 @endforeach
</select>

现在：

<button type="submit"
        class="btn btn-primary"
        id="cartButton"
        style="background-color:#FF6A13; border: none; display:block;"
        onclick="return SelectSize();">
  <p>
    <i class="fa fa-shopping-cart"></i>
    Add to cart
  </p>
</button>

标签： javascripthtmljquery

解决方案

首先，请注意，您在select元素中使用了两个 id。除此之外，您的函数内的选择器在印刷上不正确。

现在，了解选择器#selectSize是您的select元素，要找出选择选项，您必须使用option:selectedwhere:selected过滤器来查找选定选项。休息会很容易理解，我相信。

trim()如果值仅包含空格，则使用可以避免麻烦。

function SelectSize() {
  if ($('#selectSize option:selected').val().trim()) {
    //your code
  } else {
    alert('Please Select Size');
    return false; 
  }
}

推荐阅读