How to Add Disable Option or Default Option in Select Box

How to add disable option or default option in select box?

You can implement it with

<MenuItem value="">
  <em>None</em>
</MenuItem>

for standard material select and with <option value="" /> if you are using "native" material select.
Additionaly you can add disabled prop.

Codesandbox example forked from material-ui docs

How to disable select option based on other select option selected?

Something like this? Check this fiddle

$("#1").change(function(){  var selectedOption = $(this).val();
 // Reset $("#2").children('option').each(function() {  $(this).prop('disabled', false); });
 for (var i = 0; i < selectedOption; i++) {  $("#2-" + i).attr('disabled','disabled'); }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option></select>
<select id="2"> <option value="1" id="2-1">Option 1</option> <option value="2" id="2-2">Option 2</option> <option value="3" id="2-3">Option 3</option> <option value="4" id="2-4">Option 4</option> <option value="5" id="2-5">Option 5</option></select>

How to set a disabled default option on a select element that uses ngModel (angular 11)

Define selectedItem as null since the option has value null

selectedItem = null;

Sample Image

enable / disable options based on another select option

Using a data-* attribute and the dataset property... Your code could be a lot more concise.

let gradeSelect = document.querySelector('.grade_level')
document.getElementById('level').onchange = function() {
  let level = this.value;

  gradeSelect.querySelectorAll('option[value]').forEach(function(option) {
    option.disabled = !(level === option.dataset.level)
  });
  // Sets the first one (Choose Grade Level) selected
  gradeSelect.querySelector('option').selected = true
};

<select name="level" id="level" autofocus>
  <option selected disabled>Choose</option>
  <option value="Junior">Junior</option>
  <option value="Senior">Senior</option>
</select>

<select name="grade_level" class="grade_level">
  <option selected disabled>Choose Grade Level</option>
  <option value="Grade 7" data-level="Junior">Grade 7</option>
  <option value="Grade 8" data-level="Junior">Grade 8</option>
  <option value="Grade 9" data-level="Junior">Grade 9</option>
  <option value="Grade 10" data-level="Junior">Grade 10</option>
  <option value="Grade 11" data-level="Senior">Grade 11</option>
  <option value="Grade 12" data-level="Senior">Grade 12</option>
</select>

Select2 remove default option when another selected

We can use the change event of native select elements and its scoped version change.select2.

When adding select2 plugin on an element, the change event is triggered whenever an option is selected or removed.

So, when an option from the async list is added, we should remove the all option.
Also, when all options are deleted (the select has no value), we should re-add the all option.
But we need to inform the select2 about the changes, so we trigger change.select2 event.

The full code is:

select2Instance.on('change', function () {
  const values = $(this).val();
  if (values.length > 1) {
    const index = values.indexOf('all');
    if (index > -1) {
      values.splice(index, 1);
      $(this).val(values);
    }
  } else if (values.length === 0) {
    $(this).val('all');
  }
  $(this).trigger('change.select2'); // Notify only Select2 of changes;
});

Codepen demo:
https://codepen.io/andreivictor/pen/yLNZzbb

More info about Select2 Events:

https://select2.org/programmatic-control/events
https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event

jQuery - disable selected options

Add this line to your change event handler

    $("#theSelect option:selected").attr('disabled','disabled')
        .siblings().removeAttr('disabled');

This will disable the selected option, and enable any previously disabled options.

EDIT:

If you did not want to re-enable the previous ones, just remove this part of the line:

        .siblings().removeAttr('disabled');

EDIT:

http://jsfiddle.net/pd5Nk/1/

To re-enable when you click remove, add this to your click handler.

$("#theSelect option[value=" + value + "]").removeAttr('disabled');

How to Add Disable Option or Default Option in Select Box