jQuery / Javascript根据选定的答案更改选择选项(jQuery/ Javascript change select options based on selected answer)

我有以下代码：

<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是否是最好的解决方案，以及如何实现它。

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

I have the following code:

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

And here in jsFiddle: http://jsfiddle.net/XNYU2/

I'm trying to understand if this is possible and, if so, whether jQuery or Javascript is the best solution and how I'd go about making it happen.

It's a ranking system and what I need to happen is simple. If a user selects from any dropdown any value, that value needs to be removed from the other dropdowns. Conversely, if the user then unselects that value, it needs to return to all the dropdowns.

最满意答案

尝试这个：

$(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选择器确实可以轻松地遍历元素，并且只需很少的代码即可对变更应用操作。

在重新阅读你的问题时，这会完成同样的事情，但稍有不同; 用户被迫只有一组有序排列而没有重叠，但是我们不必去掉删除/添加选项的麻烦。

Try this:

$(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' } }); }); });

You can do this in either jQuery or pure js, but jQuery selectors sure make it easy to loop through the elements and apply actions on change with very little code.

Upon re-reading you question, this accomplishes the same thing but slightly differently; the user is forced to have only 1 set of ordered ranking with no overlap, but we don't have to go to the trouble of removing/adding options.

更多推荐