Clearing select options with javascript on change

Question

Before you -1 this for being such a simple question read further, because ive spent a while searching and cant figure it out. What i have is 5 select boxes. Each ones results depend on what is selected before it. There is no submit button. I just need the to change based on whats selected in the previous box and so far i have that. Oh and the results are being pulled from a database. The problem is when you select an option in lets say box 1, box 2 options appear, but when you go and select an option in box 1 again, they options are just stacked on the others. I need them to clear when its changed again. I'll post the js i have and if you need anything else just ask.

p.s. im getting the options using php-mysql. p.s.s this site has to be finished by tomorrow so im kinda in a rush. Please dont waste time telling me this is a stupid question or what not.

Thanks in advance for the help.

$(function () { //When the page is finished loading run this code
    $('#country').change(function () {
        $.ajax({
            url: "<!--Base url taken out-->/discovery/aLoad",
            success: function (data) {
                eval(data);
            },
            error: function () {
                alert('failed');
            },
            data: {
                country: getSelectValues('#country')
            },
            type: 'POST'
        });
    });
 });

     function changeSearchBar (newBar) {
    //remove the crap
    function ClearOptions(country)
    {
    document.getElementById('country').options.length = 0;
    }

    for (var i = 0; i <= newBar.length; i++) {
        newBar[i].id = newBar[i][0];
        newBar[i].name = newBar[i][1];
        $('#group').append(
            $('<option></option>').attr('value', newBar[i].id).text(newBar[i].name)
        );
    }
     }

     function getSelectValues (sId) {
    var str = "";

    $(sId +" option:selected").each(function () {
        str += $(this).val() + ",";
    });

    return str.replace(/.$/g, '');
}

Your ClearOptions function looks good, but I don't see where you call it. It is defined wihtin changeSearchBar, but never called. I think if you call it right before your for loop you should be fine. — Zoidberg, Feb 28 '12 at 02:49

Rui Carneiro · Accepted Answer · 2012-02-28T03:06:09.543

1

From what I understand from your long post you just need to remove all select child's before starting to append the new option from the AJAX request.

Try something like this before your for loop:

$('#group').html('');

Demo: http://jsfiddle.net/57TYu/2/

edited Feb 28 '12 at 03:06

answered Feb 28 '12 at 02:47

Rui Carneiro

5,595
5
33
39

It's like your a genius or something! :D Yeah i know it was a long post. Didnt know how to clarify it. But yes that worked. Thank you very much. – Dylan Buth Feb 28 '12 at 02:53
Wait, sorry, that got rid of the option to select multiple – Dylan Buth Feb 28 '12 at 02:54
I need to be able to select multiple and have all the 2nd box options associated with those two return. Any ideas? – Dylan Buth Feb 28 '12 at 02:54
I don't get it, when you say "select multiple" its something like this? http://jsfiddle.net/57TYu/ – Rui Carneiro Feb 28 '12 at 03:00
by select multiple i mean – Dylan Buth Feb 28 '12 at 03:02
Hey dude it works what you said. The guy im working for just has a messed up stored procedure. So thanks for the help. – Dylan Buth Feb 28 '12 at 03:16

score 0 · Answer 2 · edited May 23 '17 at 12:09

Here you go, I think this is basically what you are trying to do:

How do you remove all the options of a select box and then add one option and select it with jQuery?

Basically, find the 'option' tags inside the select and remove them.

$('select').find('option').remove()

will clear all the select boxes.

This will append the data, which is assume are the options in their place:

$('select').find('option').remove().end().append(data);

I think that is what you are looking for.

Clearing select options with javascript on change

2 Answers2