Question

So I’ve learnt how to add elements to an array dynamically – how about removing them?

jQuery

$(document).on('change blur', '.roomFac', function () {
        var park = $("#park2").val();
        var lecturestyle = $("#lecture_style2").val();
        var roomstructure = $("#room_structure2").val();
        var groupsize = $("#groupSize2").val();
        var facilities = "";
        $('select[name*=roomFac]').each(function () {
            facilities += $(this).val();
            facilities += ",";
        });
        var dataString = 'park=' + park + '&' + 'lecturestyle=' + lecturestyle + '&' +
            'roomstructure=' + roomstructure + '&' + 'groupsize=' + groupsize + '&' +
            'facilities=' + facilities;
        $.ajax({
            type: "POST",
            url: "process_timetableMon2.php",
            data: dataString,
            cache: false,
            success: function (html) {
                $('#mon').html(html);
            }
        });
    });

process_timetableMon2.php

$array = explode(",", $_POST["facilities"]);

for($i = 0; $i < count($array)-2; $i++){
    echo $array[$i].'<br>';
}

I’ve uploaded some code here: http://jsfiddle.net/kfm5b/3/

Answer 1

Instead of dynamically creating more dropdown menus I suggest you rather keep it simple and stick to one dropdown menu with the multiple="multiple" attribute.

<select class="roomFac" name="roomFac" id="roomFac" multiple="multiple">
  <option selected="selected" value="">Any</option>
  <option value="opt1">Opt 1</option>
  <option value="opt2">Opt 2</option>
</select>

In the JavaScript you no longer need to loop through all the dropdown menus and their selected item values. For simplicity I kept most of your structure but I recommend that you store the values in an object instead of building the data string manually. This is more elegant and it’s easier to pass arrays, as if a string you must use multiple array[]=... strings.

$(document).on('change blur', '.roomFac', function () {
    var park = $("#park2").val();
    var lecturestyle = $("#lecture_style2").val();
    var roomstructure = $("#room_structure2").val();
    var groupsize = $("#groupSize2").val();
    var facilities = $('#roomFac').val().join( ',' );
    var dataString = 'park=' + park + '&' + 'lecturestyle=' + lecturestyle + '&' +
        'roomstructure=' + roomstructure + '&' + 'groupsize=' + groupsize + '&' +
        'facilities=' + facilities;
    $.ajax({
        type: "POST",
        url: "process_timetableMon2.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#mon').html(html);
        }
    });
});