I have a multi select control look like below,

When user select "Any", I want to deselect all other selected values and select only "Any", means, if user select "Any", do not allow to select other values else allow to select other values.

How its possible through jQuery

Thanks...

I have a multi select control look like below,

When user select "Any", I want to deselect all other selected values and select only "Any", means, if user select "Any", do not allow to select other values else allow to select other values.

How its possible through jQuery

Thanks...

• javascript
• jquery
• html

• a fiddle might be helpful – Nikunj Madhogaria Commented Sep 28, 2014 at 19:31
• you should probably add your answer among the answers instead of part of the question, it's not prohibited... at the same time @AlexChar provided a very nice answer, nice and clean (and short)... – benomatis Commented Sep 28, 2014 at 20:01

3 Answers 3

jQuery("#select").change(function() {
    if (jQuery("#select option:first").is(':selected')) {
        jQuery("#select").val("any");
    }
});

To the form below:

<select multiple id="select">
    <option value="any">Any</option>
    <option value="...">...</option>
    ...
</select>

I think you want something like this:

$("select").on("change", function () {
    var selOption = $("option:selected", this).val();
    if (selOption == "any") {
        $(this).attr("selected", false);
        $(this).val("any");
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" multiple="multiple">
    <option value="any">Any</option>
    <option value="12">twelve</option>
    <option value="13">thirette</option>
    <option value="14">fourteen</option>
    <option value="15">fifteen</option>
    <option value="16">sixteen</option>
    <option value="17">seventeen</option>
    <option value="18">eighteen</option>
    <option value="19">nineteen</option>
    <option value="20">twenty</option>
</select>

In most cases this should work

$('.my-select').val('any')

Where is ’any' is a value of Any option.

(function() {
  var mSelect;

  mSelect = $('select');

  mSelect.on('click', function(event) {
    var values, needReset;
  
    values = mSelect.val();
    needReset = event.target.value === 'any' ||
       (values.length > 1 && values.indexOf('any') !== -1);
  
    if (needReset) {
      mSelect.val('any');
    }
  });
}());

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <option value="any">Any</option>
  <option value="divorced">Maried</option>
  <option value="unmarried">Unmarried</option>
</select>