Programmatic Change in Select(ListBox) with .filter() works in Chrome but not IE11

264
November 22, 2016, at 3:15 PM

I have a function called by a selectionChange event that replicates the selection in a visible select box to a hidden but otherwise identical select box. The code I use to do this works in Chrome, but fails in IE11 (removes all selections in the hidden select box).

self.selectionChanged = function () {
                $('select#ListHidden option').removeAttr("selected");
                $('#ListVisible option:selected').each(function (n, item) {
                    $('#ListHidden option').filter(function () { return $.trim($(this).text()) === item.text; }).attr('selected', true);
                });
            };

I was able to fix the error by replacing the .filter() method with bulkier code below.

self.selectionChanged = function () {
                $('select#ListHidden option').prop("selected", false);
                $('#ListVisible option:selected').each(function (n, item) {
                    var a = $.trim($(this).text());
                    $('#ListHidden > option').each(function() {
                        var c = $.trim($(this).text());
                        if (a === c) {
                            $(this).prop('selected', true);
                        }
                    });
                });
            };

It works with the altered approach, but I'm just curious why my first attempt did not work. Was I implementing this approach incorrectly? If so then why did it work in Chrome? Is there a cleaner way of doing this that will increase compatibility?

Answer 1

It would be cleaner and more cross-platform compatible if you used Knockout throughout or didn't use Knockout at all. Knockout is designed to handle all manipulations of the DOM through the viewmodel. Combining it with jQuery DOM manipulations is likely to lead to fighting.

It looks like the work you're doing here is exactly the sort of thing that would be automatically handled if the select had the proper bindings. There is no such thing as a "selectChange" binding in Knockout. There should be an options binding and a value binding. If there is an event: { change: selectionChanged } binding, just take it out and handle the event with jQuery.

Rent Charter Buses Company
READ ALSO
send array to frescojs pro show api

send array to frescojs pro show api

Im using frescojs pro to view my images in a sexy box (:.

437
Hide and Show radio buttons with checkbox

Hide and Show radio buttons with checkbox

Basically i'd like hide and show the radio buttons if the checkbox is checked or not, but with some conditions. .

952
Datepicker loses binding when changing element ID

Datepicker loses binding when changing element ID

I'm using the jQuery datepicker on a formset in which we can add and delete forms. When adding a new form I have a set_fields function added to the Form prototype which attaches datepickers to the new fields and this works fine.

339
Why symfony2 html5 validation not work in a javascript submit?

Why symfony2 html5 validation not work in a javascript submit?

I'm working with Symfony2 and have a form which has two submit actions:.

419