2013-10-18 146 views
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" />'; 
    } 
    ?> 

回答

0

尝试是这样的:

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

注:这是未经测试

+0

如何将它合并到脚本中? –

+0

加入它'$(document).ready(function(){' – bhb

+0

它不工作:( –

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

改变你的HTML这个

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

否则

你的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(); 
} 
+0

不工作,我认为它#cool_1的功能是#wait_1或#result_1,但我不知道该怎么办:( –

+0

我已经编辑了我的答案,请现在检查它 –

+0

,并请首先在html中添加