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_1具有grpA_4相同的值。如果我为 选择“y” grpA_1，则无法选择“y”，方法是禁用或删除grpA_2to中的值grpA_4。

4

2 回答 2

0

想到的一种解决方案可能是：

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

在这种情况下，添加一个函数 IF:
任何其他下拉列表都已被选择为相同的值。
防止默认。

例子

$('.target').change(function() {
    // Your code goes in here :)
});
于 2013-03-10T10:20:27.473 回答
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>
于 2013-03-10T10:25:13.723 回答