Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <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>
</body>
</html>
 
(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));
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers