2013-10-18 52 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中添加