如何隐藏按钮，直到在jquery的下拉列表中进行选择？

问题描述

我在页面上有三个下拉菜单。在第一个下拉列表中选择一个值后，将填充其他两个下拉列表。现在，我想在第二或第三下拉菜单中进行选择时出现一个按钮。

这是我尝试过的：

下拉菜单：

<form class="cmxform" action ='functions/processform.PHP' id="Form1" method="post">
           <legend> Faculty Transaction Form</legend>
            <label for="addname">Please Select School</label>
           <select class="form-control" name="school" id="school">
                <?PHP
                $nameslist = $getschool->getSchool();
                oci_execute($nameslist,OCI_DEFAULT);
                while ($row = oci_fetch_array($nameslist,OCI_ASSOC+OCI_RETURN_NULLS)) {
                    echo '<option value="' . $row['SCHOOLPROPERNAME'] . '">' . $row['SCHOOLPROPERNAME']. '</option>';
                }
                ?>
           </select>
            <label for="names">Please Select Name</label>
          <select class="form-control" name="names" id="names1234">
               <option value='0' >Select Name</option>

        </select>
            <label for="names">Recall FTF in progress</label>
          <select class="form-control" name="ftf" id="ftf">
               <option value='0' >Select Name</option>

        </select>
            <p>Paid/Unpaid/Terminated:</p>
            <div>
            <input type="radio" id="paid" name="paid" value="paid" >
            <label for="paid">Paid</label>
            </div>
            <div>
            <input type="radio" id="unpaid" name="unpaid" value="unpaid" >
            <label for="unpaid">Un-Paid</label>
            </div>
            <div>
            <input type="radio" id="terminated" name="terminated" value="terminated" >
            <label for="terminated">Terminated</label>
            </div>
        </form>
        <input type="submit" name="submit" id="recallFTF"  value="Recall FTF"  />

    </div>
</div>       

jQuery：

$(document).ready(function(){
$('#names1234').change(function() {
  $('#recallFTF').show();
  if ($('#names1234').val() === '') {
    $('#recallFTF').show();
  } else {
      $('#recallFTF').hide();
  }
});

 });

上面的代码是相反的。这样，在第二个下拉列表中进行选择时，总会消失该按钮。我在这里关注了一些类似的问题，但没有一个能够回答我的问题。如果您想查看更多代码，请告诉我。我只发布了相关部分。

解决方法

此代码有效，您可以更改值。

<div><div>
<form class="cmxform" action ='functions/processform.php' id="Form1" method="post">
       <legend> Faculty Transaction Form</legend>
        <label for="addname">Please Select School</label>
       <select class="form-control" name="school" id="school">
       <option disabled selected value> -- select an option -- </option>
            <option value='0' >Select Name0</option>
       </select>
        <label for="names">Please Select Name</label>
      <select class="form-control" name="names" id="names1234">
      <option disabled selected value> -- select an option -- </option>
           <option value='0' >Select Name1</option>
           <option value='1' >Select Name2</option>

    </select>
        <label for="names">Recall FTF in progress</label>
      <select class="form-control" name="ftf" id="ftf">
      <option disabled selected value> -- select an option -- </option>
           <option value='0' >Select Name</option>

    </select>
        <p>Paid/Unpaid/Terminated:</p>
        <div>
        <input type="radio" id="paid" name="paid" value="paid" >
        <label for="paid">Paid</label>
        </div>
        <div>
        <input type="radio" id="unpaid" name="unpaid" value="unpaid" >
        <label for="unpaid">Un-Paid</label>
        </div>
        <div>
        <input type="radio" id="terminated" name="terminated" value="terminated" >
        <label for="terminated">Terminated</label>
        </div>
    </form>
    <input type="submit" name="submit" id="recallFTF"  value="Recall FTF"  />

    </div>
</div>       
<script>
$(document).ready(function(){
    $('#recallFTF').hide();
    $('#names1234').on('change',function() {
        if (!$("#names1234 option:selected").length) {
        $('#recallFTF').hide();
        } else {
         $('#recallFTF').show();
        }
    });
});
</script>

,

当后一个选择框都不为空时，将显示该按钮。

使用您的代码检查了值是否为''，但将选项值设置为0，因此不是''。我添加了一些<option>来帮助您理解我的意思。我还隐藏了jQuery开头的按钮，因为您只希望在有完整的表单提交时显示它。

您会注意到选择器的分组（$('#names1234,#ftf')）。这样一来，您就可以同时检查两个选择框，而不必重复代码。

$(document).ready(function() {
  $('#recallFTF').hide();
  $('#names1234,#ftf').change(function() {
    $('#recallFTF').show();
    if ($('#names1234').val() !== '' || $('#ftf').val() !== '') {
      $('#recallFTF').show();
    } else {
      $('#recallFTF').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cmxform" action='functions/processform.php' id="Form1" method="post">
  <legend> Faculty Transaction Form</legend>
  <label for="addname">Please Select School</label>
  <select class="form-control" name="school" id="school">
    <?php
                $nameslist = $getschool->getSchool();
                oci_execute($nameslist,OCI_DEFAULT);
                while ($row = oci_fetch_array($nameslist,OCI_ASSOC+OCI_RETURN_NULLS)) {
                    echo '<option value="' . $row['SCHOOLPROPERNAME'] . '">' . $row['SCHOOLPROPERNAME']. '</option>';
                }
                ?>
  </select>
  <label for="names">Please Select Name</label>
  <select class="form-control" name="names" id="names1234">
    <option value=''>Select Name</option>
    <option value='0'>0</option>
    <option value='1'>1</option>

  </select>
  <label for="names">Recall FTF in progress</label>
  <select class="form-control" name="ftf" id="ftf">
    <option value=''>Select Name</option>
    <option value='0'>0</option>
    <option value='1'>1</option>

  </select>
  <p>Paid/Unpaid/Terminated:</p>
  <div>
    <input type="radio" id="paid" name="paid" value="paid">
    <label for="paid">Paid</label>
  </div>
  <div>
    <input type="radio" id="unpaid" name="unpaid" value="unpaid">
    <label for="unpaid">Un-Paid</label>
  </div>
  <div>
    <input type="radio" id="terminated" name="terminated" value="terminated">
    <label for="terminated">Terminated</label>
  </div>
</form>
<input type="submit" name="submit" id="recallFTF" value="Recall FTF" />

</div>
</div>