Question

这是我的第一篇文章。我正在开发一个webapp，它将在五个元素之间排序五个不同的值，但我不确定如何做到最好。

有五个选择框元素，它们之间共享五个值。我将它们称为元素1-5和值A-E。目标是在所有五个元素之间仅使用一次值。如果我有：

1 = A，2 = B，3 = C，用户将元素2中的值从B更改为A，元素1需要更改为B，以便每个值只出现一次。

我目前的想法是尝试使用通过onchange从每个元素触发的单个函数，从触发元素获取新值，然后找到具有相同值的另一个元素并更新它以使用未使用的值。每个选择框如下所示：

<select id="1" onchange="updateElements(this);">

然后该函数看起来像这样：

function updateElements(trigger)
{
    var new_value = document.getElementById('trigger').value;

    // here we check all the elements minus the trigger to find one
    // with a value that matches new_value, but how? Then we go to...

    // here where we compare all of the values of the elements against
    // the list of all values to determine which one isn't being used

    // finally we set the element that had the matching value to use
    // the unused value
    document.getElementById('matchingelement').value = 'unused_value';
}

我被困了，因为我无法弄清楚如何检查所有元素以找到具有匹配值的元素，也无法弄清楚如何比较使用的值以确定哪一个未使用。

有什么想法吗？如果我完全走错了路，请随时告诉我。

Answer 1

我假设您正在使用jQuery，因为它是您的问题标签之一。

var previous_value;
$('select').focus(function(e) {

    previous_value = $(this).val();

}).change(function(e) {

    var new_value = $(this).val();
    $('select:contains(' + new_value + ')').not($(this)).val(previous_value);  

});

我想到了这样的事情。只要您对select元素进行聚焦，其当前值就会保存在变量previous_value中。在更改时，其新值将保存到new_value。同时，它将包含新文本的select元素的值设置为previous_value。它还会仔细检查所选元素是否不是此元素。

我想这就是你想要的。

Answer 2

首先，除非必须：

，否则不要使用内联JS点击处理程序

$('#1').change(function() {...}

然后，如果您正在使用jQuery，请使用jQuery：

function updateElements(trigger) {
    var new_value = $('#trigger').value;
    ...
    $('#matchingelement').value = 'unused_value';
}

我认为你走在正确的轨道上。我会使用这样的东西来获得每个选择的值：

$('select').change(function() {
    var my_val = $(this).val();

    $('select').each(function() {
        if ( $(this).val() == my_val ) {
            $(this).val( unused_val );
            return
        }
    });
});

Answer 3

你需要一些条件......

抓住你的价值

var elem1 = document.getElementById("1");
var elem2 = document.getElementById("2");

等等......

然后交叉检查你的元素

if(elem1 = "a")

{
  elem2.value="blah";
}else{change elements accordingly}

您也可以检查空值

如果你想要一些下拉值检查的真实例子我可以上传它们

尝试使用用户输入组织元素之间的值

3 个答案: