PHP - PDO - JQuery dynamic select element only allows the first option to be selected

416

For certain reasons (towards a larger picture), I have a select element that is populated by a php page. The data is populated properly within the element. However, when I make a selection the element always forces the first item in the list. If I "append" the returned data, I can select different items but if clicked again it will just keep appending on top of the existing items. If I "empty" before the "append" it shows the correct list but still forces the first item in the list and this happens whether I use onclick or onchange. Whatever code works will also need to be applied the same to this element being dynamically created on the same page later. As I understand it the $(document).on('click'... as opposed to $(document).click(... works better for dynamic elements. Any help is appreciated. Thanks, I am still new to this exchange and I hope I described my problem correctly. I have searched for hours about this problem, but I mostly get results about multiple select elements or populating a second select, and even potential answers I have tried do not work.

My data is pulled from _get_staffnames.php, and lets say it shows Frank, George, Todd.

    $stmt = $myPDO->prepare( "SELECT userID, CONCAT(firstname,' ', lastname) AS Fullname FROM tbl_user ORDER BY Fullname ASC" );
    $stmt->execute();
    $results = $stmt->fetchAll();   

    foreach ($results as $row): 
        echo '<option value="' . $row['userID'] . '">' . $row['Fullname'] . '</option>';
    endforeach

My HTML is:

    <select name="userID1" id="userID1" class="namesClass" required>
        <option selected value="">Select Staff</option>
    </select>

One JQuery way I tried, specifically for the one element id "userID1", populates Frank, George, Todd...but when I pull down and click Todd, it still shows Frank (first in list) after the click.

    $("#userID1").click(function() {
        $("#userID1").load("_get_staffnames.php");
    });

More towards the dynamic way I am going. This code allows me to choose Frank, George, or Todd and keeps the selection, but if I click on that given dynamic element again, the list keeps repeating the group +1 every time I click on it.

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: '_get_staffnames.php',
            })
            .done(function (returndata) {
                $('#' + select_id).append(returndata);
            })
    });

When I try the .empty parameter before append as below, I get the correctly populated list (without multiple appended groups) but when I choose any item it always defaults to the first item in the list (Frank) again.

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: '_get_staffnames.php',
            })
            .done(function (returndata) {
                $('#' + select_id).empty().append(returndata);
            })
    });
396

Answer

Solution:

Is clicking on theSelect element the only way you can load data from a remote source?

It's totally unconventional and by doing so, you are triggering theonclick event and performing theajax method every time you click on any item of it which will eventually recreate its child elements on every callback and thus the first item being selected as default.

371

Answer

Solution:

As kolunar pointed out, even when I clicked on my selection I was running ajax again. So, I just check if there is anything in the element before running ajax and it works. Feels silly now, but thanks for the time and input.

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");

        if ( $('#' + select_id).val() == '' ) {
            $.ajax({
                type: "POST",
                url: '_get_staffnames.php',
                })
                .done(function (returndata) {
                    $('#' + select_id).empty().append(returndata);
                })
        }
    });

People are also looking for solutions to the problem: ZIP downloads are bigger in size than they actually are on external server using PHP headers

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.