3

我有以下代码：

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

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

4

3 回答 3

5

尝试这个：

$(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 选择器确实可以轻松地循环遍历元素并使用很少的代码对更改应用操作。

重新阅读您的问题后，这完成了相同的事情，但略有不同；用户被迫只有一组没有重叠的有序排名，但我们不必费心删除/添加选项。

于 2013-07-29T16:34:49.817 回答
1

是的，这是 JavaScript 的任务。jQuery 不是 JavaScript 的替代品，但基本上是它之上的一个工具集，可以更轻松地操作浏览器元素。我推荐使用它，即使您需要了解 JavaScript 基础知识才能有效地使用它。

这里的关键是分解你的问题；一种是在 Select 更改后执行操作。在这里查看这是如何完成的： http: //api.jquery.com/change/

第二个动作是实际实现更改，例如这里描述 的从选择框中删除项目

于 2013-07-29T16:22:18.657 回答
1

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);           
            }
        });
    });
});

这只是一种方法：我在几分钟内把它放在一起，我相信它可以改进，但这应该让你开始。

于 2013-07-29T16:44:36.793 回答