Get selected option with jquery (not the option with the selected sudo)

[Adamhumbug]

I have a select box with options.

The first options looks like the following:

<option selected disabled value='0'>Something</option>

I am creting the rest of the options dynamically using php.

When the user changes the dropdown box from the preselected value, it cannot be changed back due to the disabled tag.

When i try and get the value that has been selected, it is returning the value of 0 - which is the option shown above rather than the one that has actually been selected.

Is there a way around this?

I have been using

$('#locationId').find('option:selected').val()

 

[Barand]

What happens if you get the val() of the enclosing <select> element?

[Adamhumbug]

On 10/11/2023 at 9:37 PM, Barand said:

What happens if you get the val() of the enclosing <select> element?

i get null.

 

I am getting this from a modal - the modal is populated dynamically when the modal is launched if that makes a difference.

Edited October 17, 2023 by Adamhumbug

[maxxd]

Is the modal loaded without any elements at page lead, then the elements are built dynamically when a button is clicked? Or is the modal dynamically built (then hidden) on page load?

[Adamhumbug]

The modal is built and hidden on page load.

[Adamhumbug]

It is actually part of a custom left click with a custom confirm:

 "Change Location": {
                                    name: "Change Location Of " + $name,
                                    icon: "fa-solid fa-percent",
                                    accesskey: "r",
                                    callback: function(itemKey, opt, e) {
                                        $.confirm({
                                            title: 'Change Location Of ' + $name,
                                            content: "<form action='' class='formName'>" +
                                                "<label class='mb-2'>Currently: " + $locationId + "</label>" +
                                                "<?php echo getAllLocationsBySite($_GET['event'], 'Select'); ?>" +
                                                "</form>",
                                            type: 'blue',
                                            typeAnimated: true,
                                            escapeKey: true,
                                            backgroundDismiss: true,
                                            buttons: {
                                                formSubmit: {
                                                    text: 'Change Location',
                                                    btnClass: 'btn-blue',
                                                    action: function() {
                                                        $loc = $('#locationId option:selected').val()
                                                        console.log($loc, $deviceId)
                                                        // updateDeviceLocation($deviceId, $loc)
                                                    }
                                                },
                                                close: {
                                                    text: 'Close',
                                                    action: function() {}
                                                }

                                            },
                                            onContentReady: function() {
                                                // bind to events
                                                var jc = this;
                                                this.$content.find('form').on('submit', function(e) {
                                                    // if the user submits the form by pressing enter in the field.
                                                    e.preventDefault();
                                                    jc.$$formSubmit.trigger('click'); // reference the button and click it
                                                });
                                            }
                                        });

                                    }
                                },

 

[maxxd]

I'm not sure what the latest code is part of (looks like a framework component?), tbh. So the obvious things to check are is the code wrapped in a document.ready or document.loaded check, and is the PHP actually outputting what you're expecting it to output?