CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
geek_10101010
geek_10101010

Reputation: 90

Several Select: disable/hide/remove selected option in one select

I'm trying to create a form with several select and the user should rank these selects from 1-8. However, I'm having some trouble hiding/removing/disabling the select option.

Here's my form this is just the first four of the 8 selects to be ranked

  <label>Spirituality</label>\
 <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>School</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>Family</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>Friends</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>

This is what I got so far for my script 

$(document).ready(function () {
    $("#ranks1").click(function () {
        $('#ranks1 option').prop('disabled', true);
    });
});

And I did this for the CSS. For the disabled option

select option[disabled] {
    display: none !important;
}

More background on what the form looks like. More background on what the form looks like.

Upvotes: 1

Views: 145

Answers (1)

user1477388
user1477388

Reputation: 21440

I think you are wanting the change event, not the click event.

Please consider the following example which disables the selected option on change.

HTML:

<select id="selectlist">
  <option value="0">Please select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Javascript:

$('#selectlist').on('change', function() {
    var selectedVal = $(this).find(":selected").val();
  if (selectedVal != 0) {
    // disable selected value
    var selectedOption = $(this).find('option[value=' + selectedVal + ']');
    selectedOption.attr('disabled', 'disabled');
  }
});

JSFiddle: https://jsfiddle.net/tp9urjkb/

Upvotes: 1

Related Questions