使用Javascript维护一组选择下拉列表 [英] Maintain a set of select drop down lists using Javascript
问题描述
看看这个问题，起初看起来很简单，但是它很快变得很多的代码。然而，这似乎是一个比较常见的问题。有没有人知道一个解决方案，有任何提示，如何做到这一点，而不需要编写Javascript。某些可重用的jQuery插件也可能很方便。有一个存在？
一个问题是，当选择项目时，它将变得不可用于其他选择列表。该项目从其他选择下拉列表中删除。当它再次可用（下拉变化）时，需要在列表中的正确点插入（下拉选项有一个命令）。这是我的解决方案开始变得非常复杂的一点。
个人来说，我的方法是实现它有一个主下拉列表包含所有可能的选项，只是为了缓存的目的。然后，这些选项将复制到每个从属下拉列表中。每当任何奴隶下降更改时，他们都将重新填充，以确保没有两个下拉菜单可以共享相同的选定值。
为了演示的目的在下面的代码中，我只使用了3个下拉列表，但它应该很容易扩展。只需添加模式下拉菜单，并确保它们包含属性 class =slave。
另外，如果你要使任何选项免于被删除，所以可以存在于所有的从属下拉列表中（例如下面的代码中的默认选项），只需添加属性 class =免费到主下拉菜单中的选项标签。
< script type =text / JavaScript的>
//文件加载
$（document）.ready（function（）{
//最初填充所有下拉菜单
PopulateAllDropDowns （）;
//填充每个后续更改的所有下拉菜单
$（'select.slave'）。change（function（）{
PopulateAllDropDowns（）;
}）;
}）;
函数PopulateAllDropDowns（）
{
//填充所有从属下拉菜单
$（'select.slave'）。each（function（index）{
PopulateDropDown（$（this）.attr（'id'））;
}）;
}
函数PopulateDropDown（id）
{
//保留所选值
var selectedValue = $（'＃'+ id）.val （）;
//清除当前内容
$（'＃'+ id）.html（''）;
//尝试添加主选项中的每个选项
$（'select＃ddlTemplate'）。children（'option'）。each（function（index）{
//范围安全var
var masterOptionValue = $（this）.val（）;
//检查选项是否在另一个从属下拉菜单中使用，除非它是免费的
var optionInUse = false;
如果（！$（this）.hasClass（免疫））
{
$（'select.slave选项：选择' .each（function（index）{
if（masterOptionValue == $（this）.val（））
optionInUse = true;
}）;
}
//如果没有使用，将它添加到此从属下拉
if（！optionInUse）
{
//创建新选项
var newOption = $ （ '<选项>< /选项>'）。VAL（$（此）.VAL（））HTML（$（本）的.text（））。
//确保选择的值被保留（如果适用）
if（selectedValue == $（this）.val（））
newOption.attr（'selected'，'selected '）
//添加选项
$（'＃'+ id）.append（newOption）;
}
}）;
}
< / script>
code><形式>
<！ - 主下拉 - >
< select id =ddlTemplateclass =masterstyle =display：none>
< option value =class =immune>选择...< / option>
< option value =a>选项A< / option>
< option value =b>选项B< / option>
< option value =c>选项C< / option>
< option value =d>选项D< / option>
< option value =e>选项E< / option>
< / select>
<！ - 从属下拉菜单 - >
< select id =ddlOneclass =slave>< / select>
< select id =ddlTwoclass =slave>< / select>
< select id =ddlThreeclass =slave>< / select>
< / form>
希望有所帮助。
I have a set of drop down lists (8 in all). All drop downs have the same set of drop down options available to them. However the business requirement is to make sure that the user cannot select the same option more than once.
Looking at the problem, at first it appears simple but it's rapidly becoming lots of code. However it seems like a relatively common problem. Does anyone know of a solution, have any tips on how to do this without writing reams of Javascript. Some sort of reusable jquery plugin might be handy for this too. Does one exist?
One issue is that when a select item is chosen, it then becomes unavailable to the other select lists. The item is removed from the other select drop downs. When it becomes available again (a drop down changes) it needs to be inserted at the correct point in the list (the drop down options have an order). This is the bit where my solution has started to get quite complex.
Personally, the way I'd implement it is to have a "master" drop down containing all possible options, simply for the purpose of caching. These options are then replicated in each of the "slave" drop downs. Whenever any slave drop down is changed, they're all re-populated again to ensure that no two drop downs can share the same selected value.
For the purpose of demonstration, I've only worked with 3 drop down lists in the code below, but it should scale up pretty easily. Just add mode drop downs and make sure they contain the attribute class="slave".
Also, if you want any of the options to be immune from being removed, so that it's possible to exist in all of your slave drop downs (such as the default option in the code below), just add the attribute class="immune" to the option tag in the master drop down.
<script type="text/javascript">
// document - on load
$(document).ready(function() {
// initially populate all the drop downs
PopulateAllDropDowns();
// populate all drop downs on each subsequent change
$('select.slave').change(function(){
PopulateAllDropDowns();
});
});
function PopulateAllDropDowns()
{
// populate all the slave drop downs
$('select.slave').each(function(index){
PopulateDropDown($(this).attr('id'));
});
}
function PopulateDropDown(id)
{
// preserve the selected value
var selectedValue = $('#'+id).val();
// clear current contents
$('#'+id).html('');
// attempt to add each option from the master drop down
$('select#ddlTemplate').children('option').each(function(index){
// scope-safe var
var masterOptionValue = $(this).val();
// check if option is in use in another slave drop down, unless it's immune
var optionInUse = false;
if (!$(this).hasClass("immune"))
{
$('select.slave option:selected').each(function(index){
if (masterOptionValue == $(this).val() )
optionInUse = true;
});
}
// if it's not in use, add it to this slave drop down
if (!optionInUse)
{
// create new option
var newOption = $('<option></option>').val($(this).val()).html($(this).text());
// ensure selected value is preserved, if applicable
if (selectedValue == $(this).val())
newOption.attr('selected', 'selected')
// add the option
$('#'+id).append(newOption);
}
});
}
</script>
<form>
<!-- master drop down -->
<select id="ddlTemplate" class="master" style="display:none">
<option value="" class="immune">Select ...</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
<option value="d">Option D</option>
<option value="e">Option E</option>
</select>
<!-- slave drop downs -->
<select id="ddlOne" class="slave"></select>
<select id="ddlTwo" class="slave"></select>
<select id="ddlThree" class="slave"></select>
</form>
Hope that helps.
这篇关于使用Javascript维护一组选择下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
