Refresh/reload a dropdown list after removing values with jQuery?

Question

The following code removes dropdown list values based on text entered in a textbox.

FIDDLE DEMO

JQUERY

var ddl = ('#ddl'),
  txt = ('#txt');

$(txt).change(function() {   
  var x = $(txt).val(),
    li = $(ddl).html();

  if (x.length != 0) {
    $(ddl).html(li);
    $(ddl + ' :not([value="' + x + '"])').remove();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" placeholder="Enter a number...">

<select id="ddl">
  <option value="0" selected="selected">Select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

QUESTION

How to restore dropdownlist values back to initial state when a new value is entered into the textbox?

I have been attempting to use:

$(ddl).selectmenu("refresh");

but this stops the script from working as expected.

This is redundant: var li = $(ddl).html(); $(ddl).html(li); — LcSalazar
– LcSalazar, Commented Oct 2, 2014 at 13:43

leopik · Accepted Answer · 2014-10-02 13:46:02Z

2

Like so

    ...
    $(ddl).html(li);
    $(ddl + ' :not([value="' + x + '"])').hide();
} else {
    $(ddl + ' :not([value="' + x + '"])').show();
}
...

Instead of removing the item completely, you simply hide. When you empty the input field, re-show all the items.

answered Oct 2, 2014 at 13:46

leopik

2,3512 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nikotromus Over a year ago

I've been working on this all day! Thank you!!!!!!

Pedro Ferreira · Accepted Answer · 2014-10-15 09:22:20Z

0

You could try something like this:

var ddl = ('#ddl'),
    txt = ('#txt');

$(txt).change(function () {
    var x  = $(txt).val(),
        li = $(ddl).html();

    $(ddl + ' option').show();

    if (x.length != 0) {     
        $(ddl).html(li);
        $(ddl + ' option:not([value="' + x + '"])').hide();
        $(ddl + ' option[value="' + x + '"]').prop('selected',true);
    }
});

edited Oct 15, 2014 at 9:22

answered Oct 2, 2014 at 14:03

Pedro Ferreira

536 bronze badges

Collectives™ on Stack Overflow

Refresh/reload a dropdown list after removing values with jQuery?

FIDDLE DEMO

QUESTION

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

QUESTION

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related