必須選擇多個選擇輸入

Question

我有兩個選擇輸入，必須在#GO按鈕顯示之前選擇兩個。

（dbname，user）<---這兩個選擇輸入，選擇哪個數據庫並選擇一個用戶來訪問數據庫。

該查詢的問題在於，在選擇兩者之一后，將顯示#GO按鈕。 必須在顯示#GO之前選擇兩者，否則請隱藏#GO按鈕。

腳本文件：

<script type="text/javascript">

$(document).ready(function() {

$("select").on('change',function() {


    var x = $('select[name=name]').val();
    var y = $('select[name=dbname]').val();

    if (x == 0  && y == 0) {
       $("#GO").hide();
    } else if (x == 1  && y == 0) {
        $("#GO").hide();
    } else if (y==0 && x==1) {
        $("#GO").hide();
    }else{
       $("#GO").show();
    }
});

這是PHP文件：

        <?php   echo "<select name='name' id='name'>";
                $res = $conn->query("SELECT user FROM mysql.user");
                    echo    '<option value="0">Select User</option>';
                    while($row = $res->fetch_assoc()) {
                        echo '<option value="' . $row['user'] . '">' . $row['user'] . '</option>'; }
                            echo '</select>';
                echo "<br/>"; 

        ?>

        <br>

        <?php   echo "<select name='dbname' id='dbname'>";
                $res = $conn->query("show databases");
                    echo    '<option value="0">Select Database</option>';
                    while($row = $res->fetch_assoc()) {
                        echo '<option value="' . $row['Database'] . '">' . $row['Database'] . '</option>'; }
                            echo '</select>';
                echo "<br/>"; 

        ?><br>


                <input type="submit" name="GO" value="GO" id="GO" class="GO">

Answer 1

您要使用“ ||” 代表“或”，而不是代表“與”的“ &&”。

在這種情況下，如果其中任何一個為0，它將被隱藏。

if (x == 0  || y == 0) {
  $("#GO").hide();
}else{
  $("#GO").show();
}

您也可以這樣：

//It checks whether both x and y are Not 0, if true, shows "#GO", else, stays hidden.

if (x != 0  && y != 0) {
  $("#GO").show();
}else{
  $("#GO").hide();
}

Answer 2

在此， if (x == 0 && y == 0) ，則條件僅當且僅當未選擇時才隱藏#GO按鈕。 但是您應該檢查是否未選擇其中之一，然后隱藏按鈕。 因此條件必須為if (x == 0 || y == 0) ，這意味着未選擇其中一個。

再次，

else if (x == 1  && y == 0) {
    $("#GO").hide();
} else if (y==0 && x==1) {
    $("#GO").hide();

以上兩個條件之間沒有區別。

這就是你想要的

$(document).ready(function() {
    $("select").on('change',function() {
        var x = $('select[name=name]').val();
        var y = $('select[name=dbname]').val();

        if (x == 0  ||y == 0) {
           $("#GO").hide();
        }else{
           $("#GO").show();
        }
    });
});

這將足以實現您想要做的事情

Answer 3

你可以這樣嘗試

$(document).ready(function() {

  var GO = $('#GO');
  var dbname = $('#dbname');
  var name = $('#name');

  GO.attr('disabled', 'disabled'); //initially disabled

  function EnableDisableGo() {

    if (verifySelect()) {
        GO.attr('disabled', '');
    } else {
        GO.attr('disabled', 'disabled');
    }
  }

  function verifySelect() {
    if (dbname.val() != '' && name.val() != '') { //if both selected
        return true;
    } else {
        return false
    }
  }

 dbname.change(EnableDisableGo);

 name.change(EnableDisableGo);


});

Answer 4

使用過濾器和切換按鈕，可以更輕松地完成此操作

 $(document).ready(function() { $("select").on('change',function() { $('#GO').toggle( $('#name, #dbname').filter(function() { return this.value === $('option',this).first().val(); }).length === 0 ); }).trigger('change') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name='name' id='name'>"; <option value="0">Select User</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br/><br/> <select name='dbname' id='dbname'> <option value="0">Select Database</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br/><br/> <input type="submit" name="GO" value="GO" id="GO" class="GO">