简体   繁体   English

从数据数组中删除值

[英]Remove value from data array

I have a data array that is used to fill three drop downs, <select> boxes. 我有一个数据数组,用于填充三个下拉列表,即<select>框。 My question is how would I remove the same values from the array (not the array itself, but remove(or) disable the same value from the drop down)? 我的问题是如何从数组中删除相同的值(不是数组本身,而是从下拉列表中删除(或)禁用相同的值)?

For example: 例如:

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_1 to grpA_4 have the same values. grpA_1grpA_4具有相同的值。 If I select 'y' for grpA_1 , 'y' cannot be chosen, by either disabling or removing the value from grpA_2 to grpA_4 . 如果我为grpA_1选择'y',则无法通过禁用或从grpA_2grpA_4删除值来选择'y'。

One solution that springs to mind could be: 一个想到的解决方案可能是:

Attach an event to the selection of an item in the drop down list. 将事件附加到下拉列表中选择的项目。

In the event, add a function that IF: 万一发生以下情况,请添加一个函数:
Any of the other drop down lists have been selected with the same value. 已选择其他任何具有相同值的下拉列表。
Prevent Default. 防止默认。

Example

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

Not sure I've understood your question, based on the previous answer. 基于先前的答案,不确定我是否理解您的问题。 I was going to use your data, but was unsure of how the lists are populated. 我打算使用您的数据,但是不确定如何填充列表。

This code will create two lists. 此代码将创建两个列表。 If an option is selected in the 2nd list, the item in the first list with the same index is also disabled. 如果在第二个列表中选择了一个选项,则第一个列表中具有相同索引的项目也会被禁用。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM