0

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" />';
    }
    ?>
4

3 に答える 3

0

次のようなことを試してください：

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

注：これはテストされていません

于 2013-10-18T06:07:37.770 に答える
0

この機能を使用する

$(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();
}
于 2013-10-18T06:09:17.087 に答える