如何在 jquery 的下拉列表中进行选择之前隐藏按钮？

Question

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

这是我尝试过的方法：

下拉菜单：

<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();
  }
});

 });

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

Answer 1

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

<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>

Answer 2

这将在后一个 select 框不为空时显示按钮。

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

您会注意到 select 或 ($('#names1234, #ftf')) 的分组。这允许您同时检查两个 select 框，而无需重复代码。

$(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>

如何在 jquery 的下拉列表中进行选择之前隐藏按钮？

How to hide a button until a selection is made in the dropdown in jquery?

php

jquery

button

show

hide