删除&如果其他选择更改，则添加选择框选项 [英] remove & add select box option if other selection changes

问题描述

我有3个选择框，并且都具有相同的值（克隆）&创建参考表选择的更改。
现在我想管理三个Constraint下拉列表中的选择，因此它'不会显示在另外两个选定的'，并且用户不能从两个选择相同的选项。
如何在jQuery中做到这一点？

代码是 -

 < tr> 
< td>参考表：< / td> 
< td> 
< select id =tableComboonchange =jQuery.ajax（{type：'POST'，data：'tableCombo ='+ this.value，url：'/ GryphonMonitor / load / getColumns'，成功： function（data，textStatus）{jQuery（'＃columns'）。html（data）;}，error：function（XMLHttpRequest，textStatus，errorThrown）{}，complete：function（XMLHttpRequest，textStatus）{LoadSelects（）;}} ）; NAME = tableCombo > 
< / td> 
< / tr> 
< tr id =cons> 
< td nowrap =>约束开启：< / td> 
< td nowrap => 
< select id =columnsonchange =colChange（this）; NAME = 列 > 
< option value =CountryCode> CountryCode< / option> 
< option value =Date>日期< / option> 
< option value =Number> Number< / option> 
< option value =Type> Type< / option> 
< / select> 
< / td> 
< td nowrap =>约束值：< / td> 
< td nowrap => 
< / tr> 
< tr id =cons1> 
< td>约束开启：< / td> 
< td> 
< select id =columns2onchange =colChange（this）; NAME = columns2 > 
< option value =CountryCode> CountryCode< / option> 
< option value =Date>日期< / option> 
< option value =Number> Number< / option> 
< option value =Type> Type< / option> 
< / select> 
< / td> 
< td>约束值：< / td> 
< td> 
< / tr> 
< tr id =cons2> 
< td>约束开启：< / td> 
< td> 
< select id =columns3onchange =colChange（this）; NAME = columns3 > 
< option value =CountryCode> CountryCode< / option> 
< option value =Date>日期< / option> 
< option value =Number> Number< / option> 
< option value =Type> Type< / option> 
< / select> 
< / td> 
< td>约束值：< / td> 
< td> 
< / tr> 
  

JS函数在这里 -

<$ p $ （$（$＃column）。html（））。val（''）（）函数LoadSelects（）
{
$（＃columns2，＃columns3）。 '）;
}
///我试图通过这个做法，但看起来不太好。在这里寻找帮助。


函数getArray（）
{
var selectElement = [];
$（'＃columns option'）。each（function（）{
selectElement.push（$（this）.val（））
}）;
return selectElement;
}

函数colChange（col）{
selectElements = getArray（）;
var $ this = col;
for（i = 1; i< selectElements.length; i ++）
{
if（col.value == selectElements [i]）{
if（col.name =='columns'）{
$（'＃columns2'）。find（'option [value ='+ selectElements [i] +']'）。remove（）;
$（'＃columns3'）。find（'option [value ='+ selectElements [i] +']'）。remove（）;

else if（col.name =='columns2'）{
$（'＃columns'）。find（'option [value ='+ selectElements [i] +'] '）。去掉（）;
$（'＃columns3'）。find（'option [value ='+ selectElements [i] +']'）。remove（）;

else if（col.name =='columns3'）{
$（'＃columns'）。find（'option [value ='+ selectElements [i] +'] '）。去掉（）;
$（'＃columns2'）。find（'option [value ='+ selectElements [i] +']'）。remove（）;
}

}

我相信它应该是某种东西对于有经验的jQuery开发人员来说很简单。
在此先感谢。

解决方案

更新为改进解决方案！

我希望这有助于，这是一个非常基本的演示，需要一些调整，但应该做的伎俩！
http://jsfiddle.net/BUuZv/2/

I have 3 select boxes and all are having same value (clones) & created on change of reference table selection. now i want to manage the selection on the three Constraint dropdown so that it 'Does not show the selected one in other two' and user cant select the same from two. how to do it in jquery?

Code is -

<tr>
<td> Reference Table:</td>
<td>
   <select id="tableCombo" onchange="jQuery.ajax({type:'POST',data:'tableCombo=' +        this.value, url:'/GryphonMonitor   /load/getColumns',success:function(data,textStatus)   {jQuery('#columns').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown)    {},complete:function(XMLHttpRequest,textStatus){LoadSelects();}});" name="tableCombo">
  </td>
  </tr>
  <tr id="cons">
<td nowrap=""> Constraint On: </td>
<td nowrap="">
<select id="columns" onchange="colChange(this);" name="columns">
<option value="CountryCode">CountryCode</option>
<option value="Date">Date</option>
<option value="Number">Number</option>
<option value="Type">Type</option>
</select>
</td>
<td  nowrap=""> Constraint Value: </td>
<td  nowrap="">
 </tr>
<tr id="cons1">
<td> Constraint On: </td>
<td>
<select id="columns2" onchange="colChange(this);" name="columns2">
<option value="CountryCode">CountryCode</option>
<option value="Date">Date</option>
<option value="Number">Number</option>
<option value="Type">Type</option>
 </select>
</td>
<td> Constraint Value: </td>
<td>
 </tr>
 <tr id="cons2">
   <td> Constraint On: </td>
  <td>
  <select id="columns3" onchange="colChange(this);" name="columns3">
<option value="CountryCode">CountryCode</option>
<option value="Date">Date</option>
<option value="Number">Number</option>
<option value="Type">Type</option>
</select>
</td>
<td> Constraint Value: </td>
<td>
  </tr>

JS functions are here-

 function LoadSelects()
{
$("#columns2, #columns3").html( $("#columns").html()).val('') ;
}
  ///I  am trying to do thru this menthod but does not look good. here looking for help.


function getArray()
{
   var selectElement = [];  
  $('#columns option').each(function() {
 selectElement.push($(this).val())
 });
return selectElement;      
}  

 function colChange(col){
selectElements = getArray();
var $this = col;
for (i = 1; i < selectElements.length; i++)
{
     if(col.value == selectElements[i]){
   if(col.name == 'columns'){
  $('#columns2').find('option[value=' + selectElements[i] + ']').remove();
$('#columns3').find('option[value=' + selectElements[i] + ']').remove();
         }
else if(col.name == 'columns2'){
$('#columns').find('option[value=' + selectElements[i] + ']').remove();
$('#columns3').find('option[value=' + selectElements[i] + ']').remove();
             }
else if(col.name == 'columns3'){
$('#columns').find('option[value=' + selectElements[i] + ']').remove();
$('#columns2').find('option[value=' + selectElements[i] + ']').remove();
             }

     }

I am sure it should be something simple for a experienced jquery developer. thanks in advance.

解决方案

Updated to an improved solution!

I hope this helps, it's a very basic demo and needs a few adjustments but should do the trick! http://jsfiddle.net/BUuZv/2/

这篇关于删除&amp;如果其他选择更改，则添加选择框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！