如何隐藏选择下拉选择
How to hide select dropdown select?
当选择 name="drop_1"
id="drop_1" 的值等于 'ALL' 时,我想隐藏我的 #wait_1 和 #result_1 ?我是jquery/javascript的新手,请指导我。
请检查下面的代码。
应用.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>
功能.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" />';
}
?>
尝试这样的事情:
$("select[name=drop_1]").change(function() {
if($(this).val() == "All") {
//hide here
$("select[name=tier_two]").hide();
}
});
注意:这是未经测试的
使用此函数
$(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();
}
如果你想保留你的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)
}
相关文章:
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 货到付款选择隐藏/显示付款方式
- 根据下拉选择隐藏四个输入框
- 如何根据下拉菜单选择隐藏/显示文本框
- 如何根据下拉列表中的选择隐藏表格行
- 根据多个选择隐藏选择选项
- 如何根据选择隐藏谷歌图表工具提示操作
- 但是,根据下拉选择隐藏和显示输入文本
- 通过复选框选择隐藏动态谷歌地图标记
- 尝试使用jQuery在父DOM中选择隐藏字段
- 启动-选择隐藏事件未触发
- PHP - WebCalendar -基于下拉列表选择隐藏字段
- 引导下拉隐藏点击选择隐藏下拉
- 更改html列表以选择隐藏的输入类型
- 如何用jQuery选择隐藏表格中的行
- 根据单选按钮选择隐藏OK按钮
- 选择隐藏和显示问题:多于两个元素
- 根据下拉列表中的选择隐藏和显示面板
- 选项列表中选择隐藏和显示
- 按Id选择隐藏的表单元素