Get the options for second select depending on the value of my fisrt select

Question

Hi I'd like some help please.

I'm having 2 dropdown menus. In the first one I pick the name of a city

<select id="select1" class="select" name="city">
<option value="101000000">city1</option>
<option value="102000000">city2</option>
<option value="103000000">city3</option>
</select>

and in 2nd one I want to display dynamicly all municipalities of the selected city each time

<select id="select2" name="municipality[]" multiple="multiple"></select>

So in order to fetch all municipalities I do this

<script>
    $("#select1").on("change", function() {
        var x = $("#select1").val();

        $.ajax({
            type: "POST",
            url: "fetch_municipalities.php",
            // async: false,
            data:"level1="+x,
            success:function(data){
                // alert(data);

                $("#select2").html(data).multiselect(); 
            },
            error:function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });
</script>

This is my fetch_municipalities.php

if(isset($_POST['level1'])) {
    $post_lvl2 =  $_POST['level1'];
    // die($_POST['level1']);
    // echo $_POST['level1'];

    $sql = 'SELECT * FROM L_Areas WHERE CentralAreaID = ' . $post_lvl2;
    $query = mysqli_query($db, $sql);

   $filter_list_lvl2 = '';

    while($row = $query->fetch_assoc()){ 

        $name_lvl2 = $row['AreaName'] ;            
        $id_lvl2 = $row['AreaID'] ;
        $central_lvl2= $row['CentralAreaID'] ;

        // the option tags
        $filter_list_lvl2 .=  '<option value="' . $id_lvl2 . '">' . $name_lvl2 . '</option>';
    } 

    echo $filter_list_lvl2; 
}

So If I select city1 the first time I get all municipalities of city1, but when I select another city (eg city2) the municipalities don't change (remains from city1).

How can I fix this?

Nothing regarding the dropdowns.. It displays the post request to the fetch_municipalities.php too and I can see the items returned in — ltdev, Mar 18 '15 at 11:14
Why have you added your select2 name as `name="municipality[]"` and not `name="municipality"` ? — itssajan, Mar 18 '15 at 11:18
because I want to choose more than one municipalities from the 2nd select. http://stackoverflow.com/questions/29119484/cant-get-the-values-from-multiple-select-with-get-request — ltdev, Mar 18 '15 at 11:20

score 1 · Answer 1 · answered Mar 18 '15 at 12:30

1

Try this :

$("#select2").multiselect();

$("#select1").on("change", function() {
        $.ajax({
            type: "POST",
            url: "fetch_municipalities.php",
            data: { level1 : $(this).val() },
            success:function(data){
                $("#select2").html(data).multiselect('refresh'); 
            },
            error:function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });

answered Mar 18 '15 at 12:30

Jeremy Thille

26,047
12
43
63

No, I'm afraid the plugin breaks – ltdev Mar 18 '15 at 12:33
Uh? That's weird because it seems to be the proper way. I'm running out of ideas... Try another multiSelect plugin maybe =) – Jeremy Thille Mar 18 '15 at 12:37
Ok I'll try to find out what's wrong with this one, or maybe try another one as you suggested. However the functionality works! Thank you for your time – ltdev Mar 18 '15 at 12:45
I have set up a quick Pen, I can't make ajax calls so I have hardcoded three variables to simulate ajax results. But anyway, `.multiselect('refresh')` works fine : http://codepen.io/jeremythille/pen/emQaOw?editors=101 – Jeremy Thille Mar 18 '15 at 12:54

score 0 · Accepted Answer · answered Mar 18 '15 at 11:20

0

I think I got it. Instead of :

data:"level1="+x

use:

data: { level1 : x }

Data must be an object, not a string.

(also, use var x = $(this).val() to avoid fetching #select1 twice in the DOM.)

answered Mar 18 '15 at 11:20

Jeremy Thille

26,047
12
43
63

this seems to work, but it breaks my multiselect plugin and I get an ugly dropdown instead – ltdev Mar 18 '15 at 11:26
It may be related to the fact that you bind the `multiselect()` plugin every time there is an ajax request. If that's the correct plugin : http://loudev.com/ , then the plugin transforms a ` – Jeremy Thille Mar 18 '15 at 12:06
Same. It also takes the refresh method `.multiselect("refresh")` (scroll down to methods). Bind it once, then refresh it after every ajax call and it should rock. – Jeremy Thille Mar 18 '15 at 12:18
I'm sorry I'm not sure I follow you... do you mean to keep it separate from the $.ajax() function? like this ?? I tried this before but I got a blank page - didn't load the content – ltdev Mar 18 '15 at 12:27
See my second answer, try this code. I will delete my first answer – Jeremy Thille Mar 18 '15 at 12:30

Get the options for second select depending on the value of my fisrt select

2 Answers2

Linked