Remove <option> from <select>

Made for stackoverflow

by Martiens Kropff

HTML

<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>
<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="sel2">
                <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...

CSS

select option:disabled{
  border: 1px solid red;
  color: #000;
}

JavaScript

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