JAVASCRIPT/JQUERY-筛选选项(从下拉列表中选择1个值)
JAVASCRIPT/JQUERY - Filtering option(Selecting 1 value from dropdown)
条件:
假设我有几个以字母A开头的值;然后是"B",然后是"C",依此类推……
如果我选择字母表"A",它将显示用"A"表示的值。。。我将使用复选框选择由"A"列出的几行。现在,如果选择字母表B,我将使用复选框选择由"B"列出的几行,其他字母也是如此。。。
以下是我的要求:
1( 如果我返回到任何字母表过滤器,则所选复选框行应显示为已选中。。我的意思是,即使我在过滤器之间来回导航,它们也不应该被取消选择。
2( 此外,如果我选择了过滤器中的所有内容,则应显示我之前为每个字母表单独选择的复选框。他们不应该被取消选择。
如果你需要任何其他信息,请告诉我。提前谢谢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Testing Page</title>
<meta name="description" content="File to generate strong passwords of a chosen length.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
<style>
</style>
</head>
<body style="font-size:11px;">
<div id="tabs" style="margin:24px;margin-top:48px;">
<form class="pure-form">
<select id="alpha" style="float:right;margin-top:4px;margin-right:8px;width:60px;">
<?php
for($i=65;$i<91;$i++) {
?>
<option value="<?= chr($i); ?>"><?= chr($i); ?></option>
<?php
}
?>
</select>
</form>
<ul>
<?php
for($i=65;$i<91;$i++) {
?>
<li><a href="#tabs-<?= chr($i); ?>" id="tablink-<?= chr($i); ?>"><?= chr($i); ?></a></li>
<?php
}
?>
</ul>
<?php
for($i=65;$i<91;$i++) {
?>
<div id="tabs-<?= chr($i); ?>">
<?php
for($j=65;$j<91;$j++) {
?>
<span style="margin-right:12px;border:1px solid #dedede;padding:4px;"><input type="checkbox" name="checkbox-<?= chr($i); ?><?= chr($j); ?>" id="checkbox-<?= chr($i); ?><?= chr($j); ?>"> <?= chr($i); ?>-<?= chr($j); ?></span>
<?php
}
?>
</div>
<?php
}
?>
</div>
<div id="tabs2" style="margin:24px;margin-top:48px;">
<form class="pure-form">
<select id="alpha2" style="float:right;margin-top:4px;margin-right:8px;width:60px;">
<?php
for($i=65;$i<91;$i++) {
?>
<option value="<?= chr($i); ?>"><?= chr($i); ?></option>
<?php
}
?>
</select>
</form>
<ul style="display:none;">
<?php
for($i=65;$i<91;$i++) {
?>
<li><a href="#tabs2-<?= chr($i); ?>" id="tablink2-<?= chr($i); ?>"><?= chr($i); ?></a></li>
<?php
}
?>
</ul>
<?php
for($i=65;$i<91;$i++) {
?>
<div id="tabs2-<?= chr($i); ?>">
<?php
for($j=65;$j<91;$j++) {
?>
<span style="margin-right:12px;border:1px solid #dedede;padding:4px;"><input type="checkbox" name="checkbox2-<?= chr($i); ?><?= chr($j); ?>" id="checkbox2-<?= chr($i); ?><?= chr($j); ?>"> <?= chr($i); ?>-<?= chr($j); ?></span>
<?php
}
?>
</div>
<?php
}
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
$( "#tabs2" ).tabs();
} );
$('#alpha').on('change',function(){
$('#tablink-' + $(this).val()).trigger('click');
});
$('#alpha2').on('change',function(){
$('#tablink2-' + $(this).val()).trigger('click');
});
</script>
</body>
</html>
相关文章:
- 将下拉列表“选择值”传递到 URL
- 禁用基于下拉列表选择 asp.net JavaScript 启用文本框
- 下拉列表<选择>为列表.js
- 经典 ASP - 下拉列表:选择与第一个下拉列表具有相同值的所有下拉列表
- 映射下拉列表选择到URL
- 删除基于先前下拉列表选择的“选择下拉列表”选项
- 下拉列表选择的值在UI淘汰js中没有更新
- 如何将 ID 分配给动态下拉列表选择
- 使用 dojo 将鼠标悬停在动态下拉列表选择上时添加工具提示
- 链接下拉列表选择列表代码 -- 连接数据
- Javascript 不遵循下拉列表选择
- 检索引导下拉列表选择文本
- 表单事件更改不适用于下拉列表选择
- 无法检测加载时的选择/下拉列表选择事件
- 如果另一个下拉列表选择发生更改,则重置另一个下拉列表
- 基于复选框和下拉列表选择优化列表
- 使用 AJAX 和 ORACLE 以及不使用 php 填充下拉列表(选择 )
- 如何在jQuery弹出窗口中显示下拉列表选择列表并检索所选值
- 调用 java 方法,从 jsp 中的下拉列表选择中设置参数值
- 使用列表而不是选项进行下拉列表选择