Sayed Sayed - 6 months ago 7
Javascript Question

The same selected drop-down option will not appear in another select drop-down.

Creating a form with 3 select boxes with 4 questions. If I have selected 1st Question from the select drop-down that question will not appear in the 2nd question select drop-down same repeat as 3rd question also. The main purpose is if user selected any questions from select drop-down that question will not appear in another select drop-down.

Demo Code:



.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 1</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 2</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 3</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>

<div class="row margin-top-20">
<div class="col-xs-6 text-right">
<a href="Create-Username-Password.html" class="btn btn-primary" role="button"> <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back</a>
</div>
<div class="col-xs-6"><a class="btn btn-primary" role="button" href="Registration-Complete.html" name="btnGlassContactInfo">Register <span class="glyphicon glyphicon-ok"></span></a></div>
</div>
</div>
</div>
</div>
</div>




Answer

The first thing you might want to do if change the select elements in your code so that each of them has a unique ID. They are all sel1 at the moment :)

Then you need to bind the onchange event to the select options that will remove the option being selected. Here is an example:

$('select').on('change', function() {
  var elem = this;
  var option = this.value;
  $('.form-control option').each(function() {
    if ($(this).html() === option && $(elem).attr('id') !== $(this).parent().attr('id')) {
      $(this).remove();
    }
  });
})

You would probably want to disable the user from using the same selection element, or store the removed options and add them back should the user change his / her mind.

I have disabled them in my example, which you can view here. https://jsfiddle.net/martiensk/jwfeqrx0/

Comments