CODEWITHSUNDEEP
jquery
Vladimir Szabo
Vladimir Szabo

Reputation: 458

Hiding options in select box dynamicly

I am building a web site for soccer players. I have a system where the admin of the site needs to enter 11 players in the db for latter listing.

Now for this I made a system with 11 select boxes with the players as options in each select box. What I want is when the admin chooses the John Doe from the first select box that option is no longer available in the other 10 select boxes, and when the admin chooses the default option on the first select box (value of 0) the John Doe returns to all select boxes. Here is the structure:

<select class="first_team" name="player_1">
  <option value="0">Choose</option>
  <option value="1">test1</option>
  <option value="2">test2 test</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
.
.
.
</select>

<select class="first_team" name="player_2">
  <option value="0">Choose</option>
  <option value="1">test1</option>
  <option value="2">test2 test</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
.
.
.
</select>

I tried something like this but did not work properly (the player was hidden permanently):

    $(".first_team").click(function(){
      var value = $(this).val();
      $(".first_team option[value=" + value + "]").hide();
    });

Upvotes: 1

Views: 66

Answers (3)

Kyle Macey
Kyle Macey

Reputation: 8154

Well, you can't reliably hide a select option cross browser, so I'd suggest disabling the elements.

Here's a working demo: http://jsfiddle.net/76fUD/

$('.first_team').on('change', function(e) {
    var $this = $(this),
        # get all the currently selected values
        values = $('.first_team').map(function() { return $(this).val() });
    # reenable all options
    $('.first_team option').removeAttr('disabled');
    values.each(function(i, item) {
        # disable each option in current values, unless they are currently selected
        $('.first_team option[value=' + item + ']').not(':selected').attr('disabled', true); 
    });
});

Upvotes: 0

user3137166
user3137166

Reputation: 1

You might also just want to rethink your UI...seems silly to have DDLs for this type of selection system. Why not just have a listbox of all the players, with something like an "select" or "->" button to "move" them to the selected list. IMO, this would be cleaner than dynamically repopulating 11 DDLs on every change.

Upvotes: -1

David
David

Reputation: 218877

the player was hidden permanently

That's because you're only ever hiding a player. Nowhere do you show the player again.

One thing you might try is to get all of the selected players whenever any selection changes, show all players (by default), and hide all selected players. Something like this:

// Whenever any selection in any select element changes
$(".first_team").change(function() {

    // First show all players
    $(".first_team option").show();

    // Then for each select element, hide the selected player from other elements
    $(".first_team").each(function () {
        var selectedPlayer = $(this).val();

        // Hide it from every list
        $(".first_team option[value=" + selectedPlayer + "]").hide();

        // But don't hide it from *this* list
        $(this).find("option[value=" + selectedPlayer + "]").show();
    });
});

There's probably (read: definitely) a more efficient way of doing this that doesn't involve all of this show/hide/show of the same elements each time, but we're not talking about a lot of elements here.

Upvotes: 2

Related Questions