Question

当select name =“drop_1”id =“drop_1”的值等于“ALL”时，我想隐藏我的＃wait_1和＃result_1？我是jquery / javascript的新手，请指导我。

请检查以下代码。

app.php

<?php 
$mysqli = new mysqli("localhost", "root", "", "app");
$tbl_name="login_admin";

session_start();
if(! isset($_SESSION['id'])){
header('location:go.php');
exit;
}
$id = $_SESSION['id'];
$sql = $mysqli->query("SELECT * FROM $tbl_name WHERE username='$id'");
$accounts   = $sql->fetch_assoc();
  include('func.php');
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin Page</title>
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
        <script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#wait_1').hide();
    $('#drop_1').change(function(){
      $('#wait_1').show();
      $('#result_1').hide();
      $.get("func.php", {
        func: "drop_1",
        drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
        return false;
    });
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>
<script>
function showUser(str) {
    var $txtHint = $('#txtHint');
    if (str == "") {
        $txtHint.html('');
        return;
    }
    $txtHint.load('app_list.php?q='+str)
}
</script>
</head>
<body style="background: radial-gradient(ellipse at center center , rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(237, 237, 237) 100%) repeat scroll 0% 0% transparent;" onload=showUser(str="ALL")>
<br/>
<br/>

<div id="id3">

<div style="text-align:center;">
<form action="app_list.php" method="post">
<select name="drop_1" id="drop_1" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">
        <option value="ALL" selected='ALL'>ALL</option>
        <?php getTierOne(); ?>
</select>

    <span id="wait_1" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_1" style="display: none;"></span>
</form>
</div>
<div id="txtHint"></div>
</div>
</body>
</html>

func.php

   <?php

    function getTierOne()
    {
        $mysqli = new mysqli("localhost", "root", "", "app");
        $result = $mysqli->query("SELECT * FROM app GROUP BY app_cn ORDER BY app_cn");
         while($row = $result->fetch_assoc())
            {
               echo '<option value="'.$row['app_cn'].'">'.$row['app_cn'].'</option>';
            }
    }

    if($_GET['func'] == "drop_1" && isset($_GET['func'])) { 
       drop_1($_GET['drop_var']); 
    }

    function drop_1($drop_var)
    {  
        $mysqli = new mysqli("localhost", "root", "", "app");
        $results = $mysqli->query("SELECT * FROM app GROUP BY app_plan_no ORDER BY app_plan_no");

        echo '<select name="tier_two" id="tier_two">
              <option value=" " disabled="disabled" selected="selected">Choose one</option>';

              while($drop_2 = $results->fetch_assoc())
                {
                if($drop_2['app_plan_no'] != '')
                {
                  echo '<option value="'.$drop_2['app_plan_no'].'">'.$drop_2['app_plan_no'].'</option>';
                }
                }
        echo '</select> ';
        echo '<input type="submit" name="submit" value="Submit" />';
    }
    ?>

Answer 1

尝试这样的事情：

$("select[name=drop_1]").change(function() {
   if($(this).val() == "All") {
       //hide here
       $("select[name=tier_two]").hide();
   }
});

注意：这是未经测试的

Answer 2

使用此功能

$(document).ready(function(e){
    $("#drop_1").on("change", function(e) {
        if( $(this).val() == "ALL") {
            $("#tier_two").hide();
        }
    });
});

并从此

更改您的HTML

 <select name="drop_1" id="drop_1" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">

到这个

 <select name="drop_1" id="drop_1" style="overflow:scroll;width:100px;">

或者如果您想使用旧的HTML代码，请使用此脚本

你的HTML会像这样

<select name="drop_1" id="drop_1" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">

和脚本看起来像这样。

function showUser(comboValue)
{
    if(comboValue == "ALL")
        $("#tier_two").hide();
}

Answer 3

如果你想保留你的showUser功能正如Sohil Desai所说，把隐藏和展示逻辑放进去。

function showUser(str) {

    var $txtHint = $('#txtHint');

    if(str == "ALL"){
        $("#wait_1").hide();
        $("#result_1").hide();
    } else {
        $("#wait_1").show();
        $("#result_1").show();
    }

    if (str == "") {
        $txtHint.html('');
        return;
    }
    $txtHint.load('app_list.php?q='+str)
}

如何隐藏选择下拉列表选择？

3 个答案: