Removing an <option> from a <select> tag according to previously selected <option> tag? (POLL Example)for

I have 50 rows of data and i want users to give them points by 1 to 50. I put dropdown boxes near them with options 1/50. But all i want is when a user selects 15(for example) for a row, 15 will be deleted from all ot开发者_JAVA技巧her select tags of other rows. I am not as good as you in JavaScript. How can i accomplish this?

Hi casablanca i couldnt make he script you sent work. I need it to work on just one select tag so i give select tag an ID and an ID for the form too. I edit the scripts getElementsByTagName with getElementsByTagID (select tag's ID) to effect only one select tag. But the function doesnt triggered?

This might not be a very good idea, because it is very difficult for the user to modify choices -- for example, if I want to give 15 to a different option, I need to change the old one to something else and then change the new one to 15. Also, once all points have been assigned, it's impossible to make any changes because all options are gone.

A better idea would be to let the user do whatever he/she wants and then validate the form in the end. You could do that like this:

function validate() {
  var used = []; // This array stores already used options

  var rows = document.getElementById('myForm').getElementsByTagName('select');
  for (var i = 0; i < rows.length; i++) {
    var points = rows[i].value;
    if (used[points]) {
      // This value was already used
      alert('Please choose a different value.');
      rows[i].focus();
      return false;
    } else {
      // This value was not used before; mark it as used now
      used[points] = true;
    }
  }
  return true;
}

And call this function in the onsubmit handler of your form:

<form id="myForm" onsubmit="return validate();">

EDIT1: id -> class

give each option the class of the number it is

<option class="15">15</option>
<option class="16">16</option>

etc.

Then jquery can remove() an item by class

$('.15').remove();

obviously have to do an on change and get the value just set. "remove()" is nice in this instance because I believe it will yank every instance of that class.

EDIT3: upon further consideration the above method would be further complicated by the need to not remove the "selected" option. Not going to figure out the exact method but I think changing the class from "15" to "selected15" with a $(this).append() or something of the sort before calling the remove would get the job done fairly safely.

EDIT2:

As noted by casblanca below this is not an ideal user interface at all for this type of input. You may want to look into this: http://www.utdallas.edu/~jrb048000/ListReorder/

Allows user to drag and drop items in a list to reorder them. Much more natural.