CODEWITHSUNDEEP
jqueryzend-framework
Programmer man
Programmer man

Reputation: 393

Dependent select related

I wrote a code on dependent selects using jquery and ajax. My code runs perfectly and generates correct inputs from the second select but the problem arises when I re-click the 1st select to try and change the 2nd select option instead of the code reseting the field, it adds another one under the second select field its in a loop whereby it keeps adding and adding instead of refreshing...heres my code at the bottom

<script type="text/javascript">
$(document).ready(function() {
        $("#region_name").bind('change', function () {
                ajaxAddField();
            }
        );
        }
    );

    // Retrieve new element's html from controller
    function ajaxAddField() 
    {
        $.ajax(
        {
            type: "POST",
            url: '<?php echo $this->baseURL()?>/admin/ajax/get-cities/city/' + encodeURIComponent($('#region_name').val()),
            success: function(newElement) {
            // Insert new element before the Add button
            //$(this).prev().remove().end().before('#city-label');
            $("#city-label").before(newElement);
            }
        }
        );
    }
</script>

Thanks in advance

Upvotes: 0

Views: 66

Answers (2)

Maxxie
Maxxie

Reputation: 76

Try this within your AJAX success:

$("#satellite_elem-label").remove();
$("#satellite_elem").parent().remove();

Upvotes: 1

KumarA
KumarA

Reputation: 1378

Before adding the options value to second drop-down when changing first drop-down, you just empty the second drop-down option values and assign the values to your second drop-down.

I hope this works.

Upvotes: 0

Related Questions