2013-03-10 88 views
0

我有一个数据数组用于填充三个下拉框,即<select>框。我的问题是,我将如何从数组中删除相同的值(不是数组本身,但从下拉列表中删除(或)禁用相同的值)?从数据数组中删除值

例如:

data = { 
firstbox_a: ['grpA_1','grpA_2','grpA_3','grpA_4'], 
firstbox_b: ['grpB_1','grpB_2','grpB_3','grpB_4'], 
grpA_1: ['y','n','un','st'], 
grpA_2: ['y','n','un','st'], 
grpA_3: ['y','n','un','st'], 
grpA_4: ['y','n','un','st'], 
grpB_1: ['a','b','avg','unc'], 
grpB_2: ['a','b','avg','unc'], 
grpB_3: ['a','b','avg','unc'], 
grpB_4: ['a','b','avg','unc'] 
} 

grpA_1grpA_4具有相同的值。如果我为grpA_1选择'y',则不能选择'y',方法是禁用或从grpA_2grpA_4中删除该值。该弹簧想到

+0

我假设这是Javascript? – christopher 2013-03-10 10:13:06

回答

0

一种解决方案可能是:

在下拉列表中附加一个事件到项目的选择。

如果发生这种情况,请添加一个函数IF:
其他下拉列表中的任何一个下拉列表都被选中为相同的值。
防止默认。

$('.target').change(function() { 
    // Your code goes in here :) 
}); 
+0

感谢克里斯的帮助。我实际上正在使用(规划)jquery(我应该指定)。我看到实现这个唯一的问题是每个下拉菜单都是基于前一个下拉列表中的选择来激活(填充)一个值的数组。 – user1648449 2013-03-10 10:41:51

+0

在JQuery中,这其实很简单。我会为你答复我的回答。 – christopher 2013-03-10 10:45:02

0

不知道我理解你的问题,基于以前的答案。我打算使用您的数据,但不确定列表是如何填充的。

此代码将创建两个列表。如果在第二个列表中选择了一个选项,则第一个列表中具有相同索引的项目也被禁用。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 
function newEl(tag){return document.createElement(tag);} 
function newTxt(txt){return document.createTextNode(txt);} 
function toggleClass(element, newStr) 
{ 
    index=element.className.indexOf(newStr); 
    if (index == -1) 
     element.className += ' '+newStr; 
    else 
    { 
     if (index != 0) 
      newStr = ' '+newStr; 
     element.className = element.className.replace(newStr, ''); 
    } 
} 
function forEachNode(nodeList, func) 
{ 
    var i, n = nodeList.length; 
    for (i=0; i<n; i++) 
    { 
     func(nodeList[i], i, nodeList); 
    } 
} 

window.addEventListener('load', mInit, false); 


function onList2Changed(list2_Element, list1_Element) 
{ 
    var i; 

    for (i=0; i<list1_Element.options.length; i++) 
    { 
     if (i == list2_Element.selectedIndex) 
      list1_Element.options[i].setAttribute('disabled', 'true'); 
     else 
      list1_Element.options[i].removeAttribute('disabled'); 
    } 
} 

function mInit() 
{ 
    var opt, mSel1, mSel2; 
    var i, numOpts = 10; 

    mSel1 = newEl('select'); 
    for (i=0; i<numOpts; i++) 
    { 
     opt = newEl('option'); 
     opt.appendChild(newTxt("boxA: " + (i+1))); 
     mSel1.appendChild(opt); 
    } 
    mSel1.setAttribute('size', i); 
    document.body.appendChild(mSel1); 

    mSel2 = newEl('select'); 
    for (i=0; i<numOpts; i++) 
    { 
     opt = newEl('option'); 
     opt.appendChild(newTxt("disable BoxA option: " + (i+1))); 
     mSel2.appendChild(opt); 
    } 
    mSel2.addEventListener('change', myFunc); 

    function myFunc() 
    { 
     onList2Changed(mSel2, mSel1); 
    } 
    document.body.appendChild(mSel2); 
} 

</script> 
<style> 
</style> 
</head> 
<body> 
</body> 
</html> 
+0

感谢您的帮助。它实际上是三个列表。 firstbox_a和_b是一个下拉列表。 grpA 1-4和grpB 1-4是第二个下拉列表。值(y,n,avg ...等)是第三个下拉列表。它的第三个下拉菜单中的相应值被禁用/删除。所以如果选择'平均'一次,'平均'不能被再次选择。 – user1648449 2013-03-10 10:38:51

+0

不用担心。我已经阅读了大约4或5次以上的评论,但很遗憾地报告我无法真正地做出正面或反面 - 也就是说,我仍然无法计算出***数据** *对象对应于每个列表所保存的数据。如果您要编辑问题以包含填充三个列表的代码,我会提供更有用的答案。 :) – enhzflep 2013-03-10 18:46:14

+0

@PSCoder - A为幼稚和可预测的。我意识到这可能是你在25分钟前低估了这一点。你只是继续点嫖娼。到目前为止,它显然对你有好处! – enhzflep 2013-03-24 07:46:46