jQuery/ Javascript change select options based on selected answer

Question

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.

What have you tried? You should start learning JavaScript and jQuery after that. — putvande, Jul 29 '13 at 16:15
I agree with @putvande, it sounds like you're asking us to write your code for you, and that's not what SO is about. Yes, you'll need JavaScript to do this, and jQuery (while not strictly necessary) will make this task about a hundred times easier. But give it a shot first before coming to SO for help. — Ethan Brown, Jul 29 '13 at 16:21
Well IMO this is a question of someone moving on from plain HTML, asking where to look next, which technology to dive into and for a pointer on how to get things to work. — Nicolas78, Jul 29 '13 at 16:25
Apologies if the question appeared to want a complete solution - that wasn't the intention. Was trying to establish if 1. It was possible, 2. Javascript or Jquery is the best option and pointers for how to go about it. — Homer_J, Jul 29 '13 at 17:38
@putvande - I haven't tried anything yet as wanted to understand if it was possible and the best technology to use. — Homer_J, Jul 29 '13 at 17:39

williambq · Accepted Answer · 2013-07-29T16:45:16.723

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.

Wow, that's perfect! I hadn't expected a complete solution but that is exactly what you've done. Really appreciate the comments within the code so I can understand what you have done. Thank you. — Homer_J, Jul 29 '13 at 17:42

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

Yes, this is a task for JavaScript. jQuery isn't an alternative to JavaScript but basically a toolset on top of it that makes manipulation of browser elements easier. I recommend using it, even though you'll need to understand JavaScript basics in order to use it effectively.

The key here is to decompose your problem; one is to perform an action once a Select has been changed. See here how this is done: http://api.jquery.com/change/

The second action is to actually implement the change, which is described e.g. here Removing an item from a select box

edited May 23 '17 at 12:29

Community

1
1

answered Jul 29 '13 at 16:22

Nicolas78

5,124
1
23
41

I think, though not quite stated that way, he meant to force you to 're-rank' the conflicting element (setting it back to 0 or 'Rank'), not actually delete the option from the select list. Or I made what seems complicated simpler by doing what I described. Hm... now not sure. – williambq Jul 29 '13 at 16:38
Thanks for taking the time to respond nicolas78, appreciated. – Homer_J Jul 29 '13 at 18:02

score 1 · Answer 3 · answered Jul 29 '13 at 16:44

The jsFiddle is here and that's the code:

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

That's just one way to do it: I put it together in a few minutes and I'm sure it can be improved but that should get you started.

Hi @frenchie - thank you for taking the time to respond. Really appreciated. I hadn't expect a complete solution so I feel a bit bad but the above doesn't quite do what I wanted. Probably because my questions wasn't clear enough. I need a user to be able to rank 5 of the 6 but they can't duplicate a rank. williambq has hit it on the head! Thank you - as I do appreciate you taking the time. — Homer_J, Jul 29 '13 at 17:44

jQuery/ Javascript change select options based on selected answer

3 Answers3