2

Actually I am developing one website where i want to assign orders to delivery staff and area or bakers from where he will pick up the delivery material. enter image description here

Above picture shows area name and bakers from where delivery staff will pickup the delivery material. So for each order (row) i want to create 2 List Boxes and depending on selection of 1st listbox i want to change the content of 2nd listbox.

<select name="<?phpecho $CurrentOrders->comment_ID; ?>" id="courseid" style="width:100%;">
    <option value="">-----Select Pick Up Area----</option>
    <?php
        $Area = DB::table('area')
            ->get();
        foreach ($Area as $Area) {
    ?>
    <option id="<?php echo $Area->area_id; ?>" value="<?php echo $Area->area_name; ?>"><?php $Area->area_name; ?></option>
    <?php } ?>
</select>

</td>

Above code is to create dynamically listboxes.

</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#1").change(function () {
            var id = $(this).val();
            var dataString = 'id=' + id;
            //alert(dataString);
            $.ajax({
                type: "POST",
                url: "ajax_section.php",
                //data: dataString,
                data: {'id': id},
                success: function (html){
                    $("#sectionid").html(html);
                },
                error: function () {
                    alert('Error');
                }
            });
        });
    });

</script>

Above script is to create the content of 2nd listboc based on selection of 1st listbox.

<?php

if($_POST['id']) {
    $id=$_POST['id'];
    $sql=DB::table('vendors')
        ->where('vendors_area','=',$id)
        ->get();
    $count=0;
    foreach($sql as $sql) {
        $count++;
    }
    if ($count > 0) {
        echo "<option selected='selected'>---- Select Section Name ----        </option>";
        foreach($sql as $sql) {
            $id=$sql->vendors_id;
            $data=$sql->vendors_name;
            echo '<option value="'.$id.'">'.$data.'</option>';
        }
    }
}
?>

And above code is to create and show the content of 2nd listbox based on selection of 1st.

But all this codes are working for only 1 listbox. It is not working dynamically Even if have changed written scripts for all listboxws as i written for 1st listbox(as #1). please help me out.

1 Answer 1

0

You need to change

$("#1").change(function ()

to

$(document).on('change',"#1",function()

in your javascript code

4
  • What will happen then? Jul 22, 2015 at 7:44
  • For dynamic generated elements, it will not trigger any event by using $("#1").change(function ()
    – Kiran LM
    Jul 22, 2015 at 9:12
  • So for other element for example for element 2 $(document).on('change',"#2",function() is needed? Jul 22, 2015 at 10:49
  • no, change it to $(document).on('change',"#courseid",function()
    – Kiran LM
    Jul 22, 2015 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.