0

Hello Friends,
I have an admin page,where i want to assign priorities to 10 questions for a exam project.Now i am doing it with drop down lists where 10 options are given in drop down.How can i add a javascript so that if admin selects value '1' in dropdown for first question then he can only chose 9 other for second question adn so-on for 10 questions.
please help me.

2
Contributors
2
Replies
11
Views
3 Years
Discussion Span
Last Post by devgit2810
0

If you have the following HTML:

<p>Question one?</p>
<select name="priority" class="priority">
  <option value="">Select priority</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<p>Question two?</p>
<select name="priority" class="priority">
  <option value="">Select priority</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<p>Question three?</p>
<select name="priority" class="priority">
  <option value="">Select priority</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
... etc.

Then your JS (I'm using jQuery here) would need to be something like:

(function ($) {
  var selector = '.priority';
  var $priorities = $(selector);

  function init() {
    $(document).on('change', selector, updatePriorities);    
  }

  function updatePriorities(e) {
    var updated = this;
    var value = updated.value;

    // loop through all options within the other select boxes 
    $priorities.not(updated).find('option').each(function() {
      if (value && this.value === value) {
        // disable option if it's value is the same as the one selected
        this.disabled = true;
      } else if (this.value === updated.prevValue) {
        // renable any values that were disbaled due to the 
        // previous value of the updated select box
        this.disabled = false;
      }
    });

    updated.prevValue = value;
  }

  // on DOM ready
  $(init);
}(jQuery));

I've created a jsbin so you can see it working: http://jsbin.com/qowukeci/1/edit

Edited by JJenZz

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.