【问题标题】:Remove value from data array从数据数组中删除值
【发布时间】:2013-03-10 09:55:24
【问题描述】:

我有一个数据数组,用于填充三个下拉列表,<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 的值。

【问题讨论】:

  • 我假设这是 Javascript?

标签: javascript html arrays json option


【解决方案1】:

想到的一个解决方案可能是:

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

在事件中,添加一个函数 IF:
已选择具有相同值的任何其他下拉列表。
防止默认。

示例

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

【讨论】:

  • 感谢克里斯的帮助。我实际上正在使用(计划)jquery(我应该指定)。我在实现这一点时看到的唯一问题是每个下拉列表都由基于上一个下拉列表中的选择的值数组激活(填充)。
  • 在 JQuery 中这实际上很容易。我会为你修改我的答案。
【解决方案2】:

根据前面的回答,我不确定我是否理解了您的问题。我打算使用您的数据,但不确定如何填充列表。

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

<!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>

【讨论】:

  • 感谢您的帮助。它实际上是三个列表。 firstbox_a,_b 是一个下拉菜单。 grpA 1-4 和 grpB 1-4 是第二个下拉菜单。值(y、n、avg ...等)是第三个下拉列表。它的第三个下拉列表具有被禁用/删除的相应值。所以如果'avg'被选中一次,'avg'就不能被再次选中。
  • 不用担心。我已经阅读了您上面的评论大约 4 或 5 次,但很遗憾地报告说我无法真正理解它 - 也就是说我仍然无法弄清楚 data 对象对应每个列表保存的数据。如果您要编辑您的问题以包含填充三个列表的代码,我将提供一个更有用的答案。 :)
  • @PSCoder - 幼稚且可预测的 +1。我意识到很可能是您在 25 分钟前对此进行了投票。你继续点嫖娼。到目前为止,它显然对你很有效!
猜你喜欢
  • 2012-09-25
  • 2019-04-12
  • 2014-10-07
  • 1970-01-01
  • 2013-03-20
  • 1970-01-01
  • 1970-01-01
  • 2019-10-19
  • 2012-07-22
相关资源
最近更新 更多