0

I have two multiple selects in a page (select-cities & chosen-cities), and I can transfer options to and fro. I have given the search functionality to select-cities list. Everything functions as I need.

The problem is, that when I search and transfer the option/s, the select-cities list now contains only the options that were shown in the current search. How should i get the list with the remaining option values which were supposed to be present in the list

Here is the demo: http://jsfiddle.net/cs6Xb/101/ and code:

html:

<input id="someinput">
<br/>
<select class="select-cities" name="city" id="optlist" multiple="multiple">
    <option>Frederiksberg</option>
    <option>Vanløse</option>
    <option>Glostrup</option>
    <option>Brøndby</option>
    <option>Roskilde</option>
    <option>Køge</option>
    <option>Gentofte</option>
    <option>Hillerød</option>
    <option>Tårnby</option>
    <option>Vallensbæk</option>
</select>
</input>
<br/>
<select class="chosen-cities" name="chosen-cities-name" multiple="multiple"></select>

jQuery:

$(function () {
    var opts = $('#optlist option').map(function () {
        return [[this.value, $(this).text()]];
    });


    $('#someinput').keyup(function () {
        var rxp = new RegExp($('#someinput').val(), 'i');
        var optlist = $('#optlist').empty();
        opts.each(function () {
            if (rxp.test(this[1])) {
                optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
            }
        });

    });
    $('.select-cities').click(function () {
        $('.select-cities option:selected').remove().appendTo('.chosen-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
    });

    $('.chosen-cities').click(function () {
        $('.chosen-cities option:selected').remove().appendTo('.select-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
    });


});
Kunal
  • 65
  • 1
  • 2
  • 6

1 Answers1

0

You could hide, instead of deleting the ones that don't match the filter value:

opts.each(function () {
    if (rxp.test(this[1])) {
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
    } else{
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
    }
});
$(".hidden").toggleOption(false);

Here is a reference to toggleOption implementation.

Demo

Community
  • 1
  • 1
Bojan Kaurin
  • 262
  • 1
  • 4