基于所选答案，jQuery/JavaScript更改选择选项

Question

我有以下代码：

<table>
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr>

在jsFiddle中：http://jsfiddle.net/XNYU2/ 我试图理解是否可能实现，如果可以的话，jQuery或JavaScript是最佳解决方案，以及如何进行操作。

这是一个排名系统，我需要发生的事情很简单。如果用户从任何下拉列表中选择任何值，则需要从其他下拉列表中删除该值。相反，如果用户然后取消选择该值，则需要将其返回到所有下拉列表中。

- Homer_J

---

是的，你需要使用JavaScript来完成这个任务。 - tymeJV

你尝试了什么？之后你应该开始学习 JavaScript 和 jQuery。 - putvande

我同意@putvande的观点，你似乎是在要求我们替你编写代码，而这不是SO的宗旨。是的，你需要JavaScript来完成这个任务，而jQuery（虽然不是必需的）会使这个任务变得容易百倍。但在寻求帮助之前，请先尝试一下。 - Ethan Brown

在我看来，这是一个关于某人从普通的HTML转向下一步的问题，询问应该深入哪种技术，并寻求如何使事情正常运行的指针。 - Nicolas78

抱歉，如果问题似乎想要完整的解决方案-那不是本意。只是想确定1.是否可能，2.Javascript或Jquery是最佳选择以及如何着手解决的指针。 - Homer_J

@putvande - 我还没有尝试任何东西，因为我想先了解是否有可能以及使用最佳技术。 - Homer_J

Answer 1

试试这个：

$(function() {
    $('select').on('change', function(event){ // This binds listeners to the change event on all the select elements
        var sId = this.id; // store off the changed element id
        var vId = this.value; // store off the changed element value 
        $('select').each( function(){ // this loops across the same set of elements
            if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something
                this.options.selectedIndex = 0; // reset the value to 'rank' 
            }
        });
    });
});

你可以使用jQuery或纯js完成此操作，但是jQuery选择器确实使得循环遍历元素并在更改时应用动作变得非常简单。重新阅读问题后，这个方法实现了相同的功能，但略有不同；用户被强制只有一个有序排名集合，没有重叠，但我们不必费力删除/添加选项。

- williambq

---

哇，太棒了！我没想到你会给我提供完整的解决方案，但这正是你所做的。非常感谢你在代码中加入的注释，这让我能够理解你所做的一切。谢谢你。 - Homer_J

Answer 2

这里是jsFiddle，以下是代码：

var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];

$(document).ready(function () {

    $('#TheTable').find('select').change(function () {

        var TheSelectedValue = parseInt($(this).val(), 10);
        var TheSelectID = $(this).prop('id');
        var TheHTML = "";

        for (var i = 0; i < SelectOptions.length; i++) {

            if (SelectOptions[i] !== TheSelectedValue) {

                TheHTML = TheHTML + '<option value="';
                TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
                TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
            } 
        }

        $('#TheTable').find('select').each(function () {

            if ($(this).prop('id') !== TheSelectID) {

                $(this).html(TheHTML);           
            }
        });
    });
});

这只是一种方法：我花了几分钟把它组合起来，我相信它可以改进，但那应该可以让你开始。

- frenchie

---

嗨@frenchie - 感谢您抽出时间回复。非常感激。我没有期望得到完整的解决方案，所以感觉有点不好意思，但是上面的内容并不能完全满足我的需求。可能是因为我的问题表述不够清晰。我需要用户能够对6个选项中的5个进行排名，但他们不能重复排名。williambq说得很对！谢谢你，我真的很感激你抽出时间来帮助我。 - Homer_J

Answer 3

是的，这是一个JavaScript任务。jQuery并不是JavaScript的替代品，而只是在其基础上提供了一套工具集，使浏览器元素的操作更加容易。我建议使用它，尽管您需要了解JavaScript基础知识才能有效地使用它。

关键在于分解问题；其中一个是在选择项更改后执行操作。请看这里如何完成此操作：http://api.jquery.com/change/ 第二个操作是实际实现更改，例如在这里描述：Removing an item from a select box

- Nicolas78

---

我认为，虽然他没有明确表述，但他的意思是要强制你重新排列冲突元素（将其设置为0或“Rank”），而不是实际从选择列表中删除选项。或者我通过执行我所描述的操作使看似复杂的事情变得更简单了。嗯...现在不确定了。 - williambq

感谢您抽出时间回复，nicolas78，非常感谢。 - Homer_J