如何根据选中的复选框在下拉选择中合并多个列表
How to merge mutliple lists in drop-down selection based on checkbox(s) selected?
>假设我们有 5 个复选框,每个复选框都有与各自元素列表映射的唯一值,就我而言,我有关联的 PHP 数组 -
[100] => Array ( [0] => Array ( [name] => NameABC [sid] => 109 )
[1] => Array ( [name] => NameDEF [sid] => 110 )
)
[101] => Array ( [0] => Array ( [name] => NamePQR [sid] => 337 )
[1] => Array ( [name] => NameXYZ [sid] => 339 )
)
因此,值可以映射到每个列表,现在通过复选框的属性,您可以选择多个复选框(与单选按钮不同),因此,在这种情况下,基于每个复选框选择填充的下拉列表现在以合并格式出现,例如选择选项 1 和选项 2 两个列表都包含映射到两者的所有元素, 进一步取消选择它回到未合并状态。
也许我过于简化了问题或遗漏了关键信息,但您不能只是:
$merged = array();
foreach ($list as $l)
{
$merged[] = $l;
}
带有键 [101]、[102] 等的数组在哪里$list?
这会给你留下:
$merged = Array (
[0] => Array ( [name] => NameABC [sid] => 109 )
[1] => Array ( [name] => NameDEF [sid] => 110 )
[2] => Array ( [name] => NamePQR [sid] => 337 )
[3] => Array ( [name] => NameXYZ [sid] => 339 )
)
或者,如果sid
对所有数组都是唯一的,也许这会更合适:
$merged = array();
foreach ($list as $l)
{
$merged[$l['sid']] = $l['name'];
}
给你:
$merged = Array (
[109] => NameABC
[110] => NameDEF
[337] => NamePQR
[339] => NameXYZ
)
最后,在对我自己的问题进行了迭代之后,我找到了几乎正确的答案。下面是我在此使用的 HTML 片段 -
<tr>
<td align="center" bgcolor="#BFD5EA" width="30%"><font size="1" face="Verdana"><b>Sales Channel : </b></font></td>
<td bgcolor="#E4E4E4" colspan="5"><font size="1" face="Verdana" width="70%">
~foreach from=$sales_channel item=r`
<input type="checkbox" name="salestype[]" value="~$r.ROLE`" id="~ $r.NAME`" >~$r.NAME`
~/foreach`
</td>
</tr>
<tr style="display: none" id="nafrat"><td align="center" bgcolor="#BFD5EA" width="30%"><font size="1" face="Verdana"><b>List of Executives:</font></b></td>
<td bgcolor="#E4E4E4" colspan="5" width="70%">
<select name="selOnlSrc[]" id="myops" multiple size="10" ><!--@@@@Done-->
~foreach from=$assigner key=k item=r`
~foreach from=$r item=m`
<option id="allexec" value="all" selected>All</option>
<option class="~$k`" class="searchSelect" style="display: none" value="~$m.execid`">~$m.display_name`</option>
~/foreach`
~/foreach`
</select>
</td>
现在最重要的是jquery部分——
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"> </script>
<script>
$(document).ready(function() {
$("input[name=salestype[]]:checkbox").click(function() {
var selected = new Array();
$('#nafrat').show();
$("input:checkbox[name=salestype[]]:checked").each(function() {
selected.push($(this).val());
});
$('#myops').children('option').hide();
var btnchk= new Array();
btnchk = $('input:checkbox[name="salestype[]"]:checked');
if (btnchk.length) {
$('#allexec').show();
}
else {
$('#allexec').hide();
$('#nafrat').hide();
}
$.each( selected, function(i, l){
$('.'+l).show();
});
selected = new Array();
btnchk = new Array();
});
</script>
为此,我能够在选择两个或多个复选框并进一步取消选中任何一个复选框时合并下拉列表中的值,从下面的列表中删除相应的内容。
注意:上面显示的HTML包含智能标签,并且还具有一些PHP变量,如"$assigner"等。
相关文章:
- 下拉选择可自动更改第二个下拉选择
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 按照选项卡索引的顺序循环一个jQuery选择
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 获取选择框的状态
- 合并到选择字段
- 如何根据选中的复选框在下拉选择中合并多个列表
- 使用多个命名选择器合并 jQuery 函数
- jQuery在选择器中合并一个变量
- 如何合并两个jQuery日期选择器
- 如何合并<选择>元素
- 合并表单选择的值
- 将复选框/选择和输入的控制功能合并为一个
- 合并选择框选择值
- js合并几何和八叉树选择