asked on

custom drop down menu with dependant results

I have created a dependant drop down select menu.
You can see it in action here http://jsfiddle.net/beaconhill/khcgmm1n/.

This my second version here http://jsfiddle.net/beaconhill/5aj1z42z/ I am attempting to use js to style the drop down select menu. As you can see the menu styling is working great but my dependant drop down results are not being displayed. I need some kind of re fresh mechanism that will allow the dependant drop down select menu to show its content after the first menu has selected its item.

Help appreciated.
NB

HainKurt

your code is tooooo messy ha ha... I am lost just looking at it...

Neil_Bradley

ASKER

in the js line 3 contains the data that is echoed in the drop down.

Line 5 to 125 deal with the conditional select menu.

The last block of js is the custom styling on the dropdown menu.

Need some kind of

 
$("#from").on('change', function () {
    $("#to")
        .myPicker('refresh');
});

Open in new window

HainKurt

why dont you use bootstrap select boxes

http://keenthemes.com/preview/metronic/theme/admin_3/form_controls.html

and use the same jquery code?

I feel like even if it works, you will get lots of compatibility issues this way...

Neil_Bradley

ASKER

Do you mean these https://silviomoreto.github.io/bootstrap-select/examples/ Huseyin?
Suspect that I would still run into the same issue due to the fact that drop down 2 is conditional http://jsfiddle.net/beaconhill/khcgmm1n/
The script would need to refresh on change of the first dropdown to allow for the results to load and the bootstrap select script to run.

HainKurt

i will check it later :)

yes I mean one of those fancy select boxes... you have too much code for such a simple stuff...

Neil_Bradley

ASKER

Not simple at all sadly as I need to keep the script that enables the dependent drop down menu.
Also my my own lines from 132 to 195 replace the entire Bootstrap select plugin which I'm confident is more than the 60 or so lines of code I've written and liable to leave me with the same issue as described in my original post..

Dorababu M

OK here is what you need, create a function as follows and call this in $('select').each(function () { }

function ToRoutes(select) {
        // Cache the number of options
        var $this = select,
          numberOfOptions = select.children('option').length;

        // Cache the styled div
        var $styledSelect = $this.next('div.styledSelect');

        // Show the first select option in the styled div
        $styledSelect.text($this.children('option').eq(0).text());

        // Insert an unordered list after the styled div and also cache the list
        var $list = $('<ul />', {
            'class': 'options'
        }).insertAfter($styledSelect);

        // Insert a list item into the unordered list for each select option
        for (var i = 0; i < numberOfOptions; i++) {
            $('<li />', {
                text: $this.children('option').eq(i).text(),
                rel: $this.children('option').eq(i).val()
            }).appendTo($list);
        }

        // Cache the list items
        var $listItems = $list.children('li');

        // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
        $styledSelect.click(function (e) {
            e.stopPropagation();
            $('div.styledSelect.active').each(function () {
                $(this).removeClass('active').next('ul.options').hide();
            });
            $(this).toggleClass('active').next('ul.options').toggle();
        });

        // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
        // Updates the select element to have the value of the equivalent option
        $listItems.click(function (e) {
            e.stopPropagation();
            $styledSelect.text($(this).text()).removeClass('active');
            $this.val($(this).attr('rel'));
            $list.hide();

            $this.trigger('change');
            /* alert($this.val()); Uncomment this for demonstration! */
        });

        // Hides the unordered list when clicking outside of it
        $(document).click(function () {
            $styledSelect.removeClass('active');
            $list.hide();
        });
    }

Open in new window

Now your function looks as follows

    $('select').each(function () {

        // Hides the select element
        $(this).addClass('s-hidden');

        // Wrap the select element in a div
        $(this).wrap('<div class="select"></div>');

        // Insert a styled div to sit over the top of the hidden select element
        $(this).after('<div class="styledSelect"></div>');

        ToRoutes($(this));

    });

Open in new window

Also in this function fromAirportChanged call this ToRoutes($("#" + _settings.toId)); instead of _settings.toAirportsChanged();

ASKER CERTIFIED SOLUTION

Dorababu M

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Neil_Bradley

ASKER

Beautiful solution Dorababu,
your time and great work appreciated.
All the very best.
Neil