Question

需要验证下拉值。只有在选择下拉值时才显示弹出窗口，否则弹出隐藏。这是我的代码：

<div class="main-search-input-item location">
                        <select class="location-option-field" name="categoryId" id="location-option-field">
                       <option value="">choose category</option>
                        <?php foreach($allcategory_datas as $categories)
                                {
                                     $id=$categories->categoryId;
                                     $category_name=$categories->categoryName;
                                echo '<option value="'.$id.'">'.$category_name.'</option>';
                                 }
                           ?>  
                        </select>
                        </div>
                       
                        <div class="main-search-input-btn">
                            <a href="#" class="button theme-btn border-0 line-height-57 catSel" style="padding: 2px 20px;" data-toggle="modal" data-target="#largeModal" onClick="return Validate()">Find Jobs</a>
                        </div>
<script>
function Validate() {
    var drop_cat= document.getElementById("location-option-field");
    alert(drop_cat);
    if (drop_cat.value == "") {
                    alert("Please select an option!");
        $("#largeModal").hide();
        $('#location-option-field').focus();
return false;
    }
    return true;
    
}

注意：获取警报消息，但它不关注下拉。请帮忙。

Answer 1

除了使用 data-target..，您还可以仅从函数中打开模态并在需要时隐藏。

演示代码：

function Validate() {
  var drop_cat = document.getElementById("location-option-field");
  if (drop_cat.value == "") {
    alert("Please select an option!");
    $("#largeModal").modal('hide'); //hide
    $('#location-option-field').focus();
  } else {
    $("#largeModal").modal('show'); //show 
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="main-search-input-item location">
  <select class="location-option-field" name="categoryId" id="location-option-field">
    <option value="">choose category</option>
    <option value="A">A</option>
    <option value="B">B</option>

  </select>
</div>

<div class="main-search-input-btn">
  <a href="#" class="button theme-btn border-0 line-height-57 catSel" style="padding: 2px 20px;" onClick="Validate()">Find Jobs</a>
</div>


<div id="largeModal" class="modal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>OK ok..</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

模态弹出框仅在下拉列表验证后才显示，验证不关注下拉列表

1 个答案: