使用jQuery在更改事件上创建新的下拉菜单 [英] Create new drop downs on change event using jQuery
问题描述
我有一些随机值下拉菜单。当我选择onchange事件触发器的值时，我想在它下面添加新的下拉列表，但新列表中的所有值除了在第一个下拉列表中选定的列表之外。现在当我改变第二个值的时候，我需要第三个只有前两个下拉菜单中没有选择的值，等等，直到没有更多的选项可供选择。
我现在所拥有的机制是添加新的下拉菜单，但它不能正常工作。例如，如果我选择第一个值，它将执行该任务，显示新的下拉列表，并且除了选定的选项之外，它具有所有选项。但是，如果我回去尝试更改第一个下拉菜单的选项，则会创建第三个下拉菜单。这不应该是一个例子，如果下拉已经创建了另一个下拉，它不应该再做一次。是否有可能避免触发新的onchange事件，以便下拉已经触发了一个事件？或者也许某种其他类型的事件更适合这种情况？
这是我描述作业的函数：
createNewDropDonws：function（）{
var selectWrapper = $（'＃select-boxes'）;
$（document）.on（'change'，'.dynamic-select'，function（）{
var element = $（this）;
var optionsLength =（element.find（ 'option'）。length） - 1;
if（optionsLength === 1）{
return true;
}
var newSelect = $（this）.clone（）;
newSelect.find（option [value ='+ element.val（）+']）。remove（）;
newSelect.appendTo（selectWrapper ）
}）;
}
这是我的HTML下拉菜单：
< div id =select-boxes>
< option value =>< / option>
< option value =Belbin> Belbin< / option>
< option value =Raven> Raven< / option>
< option value =PPA> PPA< / option>
< option value =PPA +> PPA +< / option>
< option value =基础知识>基础知识< / option>
< option value =PCT> PCT< / option>
< / select>
< / div>
这是简单的CSS类：
.dynamic-select {
display：block;
margin：10px;
}
有没有人知道如何通过使用jQuery来正确实现？
我们可以通过以下方式来完成： 添加一些类，如执行一旦它添加另一个下拉菜单。而在事件处理程序中，我们正在检查当前dropdwon是否具有该类。如果它已经存在，那么这意味着我们已经完成了该下拉菜单，如下所示：
<$ c $（document）.ready（function（）{var selectWrapper = $（'＃select-boxes'）; $（document）.on（'change'，'.dynamic-select'，function（）{var元素= $（this）; if（element.hasClass（executed））return; var optionsLength =（element.find（'option'）。length） - 1; if（optionsLength === 1）{return true; } var newSelect = $（this）.clone（）; newSelect.find（option [value ='+ element.val（）+']）。remove（）; newSelect.appendTo（selectWrapper）$（this ）.addClass（executed）;}）;}）;
.dynamic-select {display：block; margin：10px;}
< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script>< div id =select-boxes> < select class =dynamic-selectid =ddlTest> < option value =>< / option> < option value =Belbin> Belbin< / option> < option value =Raven> Raven< / option> < option value =PPA> PPA< / option> < option value =PPA +> PPA +< / option> < option value =基础知识>基础知识< / option> < option value =PCT> PCT< / option> < / select>< / div>
I have drop down menu with some random values. When I select the value onchange event triggers and I want to add new drop down under it, but the new one should have all values except selected one in first drop down. Now when I change value of second one, I need third one that has only non selected values from previous two drop downs and so on until there is no more option to select.
What I have for now is mechanism for adding new drop downs, but it is not working correctly. If I for example select first value it will do the job, new drop down is shown and it has all options except selected one. But then if I go back and try to change option for first drop down third drop down is created. This should not be a case, if drop down already created another drop down it should not do it again. Is it even possible to avoid triggering of new onchange event for drop down that already triggered one? Or maybe some other kind of event is more suitable for this case?
This is my function that does described job:
createNewDropDonws : function() {
var selectWrapper = $('#select-boxes');
$(document).on('change', '.dynamic-select', function() {
var element = $(this);
var optionsLength = (element.find('option').length) - 1;
if(optionsLength === 1) {
return true;
}
var newSelect = $(this).clone();
newSelect.find("option[value='" + element.val() + "']").remove();
newSelect.appendTo(selectWrapper)
});
}
This is my HTML for drop down:
<div id="select-boxes">
<select class="dynamic-select" id="ddlTest">
<option value=""></option>
<option value="Belbin">Belbin</option>
<option value="Raven">Raven</option>
<option value="PPA">PPA</option>
<option value="PPA+">PPA+</option>
<option value="Basic Knowledge">Basic Knowledge</option>
<option value="PCT">PCT</option>
</select>
</div>
And this is simple CSS class:
.dynamic-select{
display: block;
margin: 10px;
}
Does anybody has any idea how this can be implemented correctly by using jQuery?
We can do it in following way:
We are just adding some class like executed once it add another dropdown. And in event handler we are checking if current dropdwon has that class or not. If it is already there then it means we are already done with that dropdown as follows:
$(document).ready(function() {
var selectWrapper = $('#select-boxes');
$(document).on('change', '.dynamic-select', function() {
var element = $(this);
if(element.hasClass("executed"))
return;
var optionsLength = (element.find('option').length) - 1;
if (optionsLength === 1) {
return true;
}
var newSelect = $(this).clone();
newSelect.find("option[value='" + element.val() + "']").remove();
newSelect.appendTo(selectWrapper)
$(this).addClass("executed");
});
});
.dynamic-select {
display: block;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="select-boxes">
<select class="dynamic-select" id="ddlTest">
<option value=""></option>
<option value="Belbin">Belbin</option>
<option value="Raven">Raven</option>
<option value="PPA">PPA</option>
<option value="PPA+">PPA+</option>
<option value="Basic Knowledge">Basic Knowledge</option>
<option value="PCT">PCT</option>
</select>
</div>
这篇关于使用jQuery在更改事件上创建新的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
