Not getting the selected item from the select tags

Question

Given below are the snippets of the code which I have written to get the value of class code and section selected by the user from the dropdown. But I'm getting only the first element of the select instead of getting the selected element.

Html code:

<div id="dialog-form" title="Create New Academic Year">
            <p class="validateTips">All form fields are required.</p>
            <fieldset>

                <label for="class_code">Class</label>
                <select name="class_code" id="class_code" class="text ui-widget-content ui-corner-all">
                    <?php
                    include_once 'config.php';
                    $sql = "select class_code from list_class";
                    $result = $conn->query($sql);
                    while ($row = $result->fetch_assoc()) {
                        ?>
                        <option value="<?php echo $row['class_code'] ?>"><?php echo $row['class_code'] ?></option>
                        <?php
                    }
                    ?>
                </select>
                <label for="section">Section</label>
                <select name="section" id="section" class="text ui-widget-content ui-corner-all" multiple>
                    <?php
                    include_once 'config.php';
                    $sql = "select section_code from list_sections";
                    $result = $conn->query($sql);
                    while ($row = $result->fetch_assoc()) {
                        ?>
                        <option value="<?php echo $row['section_code'] ?>"><?php echo $row['section_code'] ?></option>
                        <?php
                    }
                    ?>
                </select>
            </fieldset>
        </div>

Js code:

var new_dialog = function (type, row) {
        var dlg = $("#dialog-form").clone();
        type = type || 'Create';
        var config = {
            autoOpen: true,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Insert": function () {
                    //To get the class_code value
                    alert($('select[name="class_code"]').val());
                    //To get the section value
                    alert($('select[name="section"]').val());

                },
                "Cancel": function () {
                    dlg.dialog("close");
                }
            },
            close: function () {
                dlg.remove();
            }
        };
        dlg.dialog(config);
    };
    $("#create-user").button().click(new_dialog);

I even tried

alert($('#class_code option:selected')val());

But even this didn't work. Can someone please help me out where I'm going wrong. Thanks in advance.

Answer 1

You dont have to select the selected option - you just have to select the selectbox itself

alert($('#class_code').val());

In your case, there's one more problem. You cloned the form, so each select box exists more than once in the dom and val() only returns the selected value of the first select box, which is the first element in the list.

You have to options - get rid of the clone or try something like this

alert($('select[name="class_code"]', dlg).val());

adding dlg to the context makes jquery search inside the cloned element, what should solve your problem

Answer 2

As i am seeing your select which you are trying to get multiple selected value is not having "multiple" attribute.

Please see here :

<select name="class_code" id="class_code" class="text ui-widget-content ui-corner-all">
                    <?php
                    include_once 'config.php';
                    $sql = "select class_code from list_class";
                    $result = $conn->query($sql);
                    while ($row = $result->fetch_assoc()) {
                        ?>
                        <option value="<?php echo $row['class_code'] ?>"><?php echo $row['class_code'] ?></option>
                        <?php
                    }
                    ?>
</select>

try adding "multiple" here:

<select name="class_code" id="class_code" class="text ui-widget-content ui-corner-all" multiple>
               //ur code
</select>