King
King

Reputation: 51

how to clear the <select> tag before filling the another value through <option> tag

On clicking these radio button it just call servlet and fill the Dropdown list to its content.

but the problem is on clicking the 1st time it is filling as expected but if I click againg the radio button then it again call the servlet and fill the same thing again(for eg. in the dropdown list matrix and matrix two times).

Q1 : How do i prevent this to fill the same thing again ????

second thing is, after clicking the 1st radio button it will fill the dropdown let suppose "matrix" value and then if click the another radio button the it will fill the another value let suppose "jack" (as expected) but the problem is, In the dropdown list both the value is contained "matrix" and "jack" but I just want if I click 1st radio button then it fill only "matrix" and again if I click 2nd radio button the it fill only "jack" the 1st radio button's value should be removed before filling the another radio button's value Q2: how to do this ??

jsp page:-

<b>Select Language :</b>
    <input type="radio" onclick="callServlet();"  id="lang1" name="lang" value="c">C
    <input type="radio" onclick="callServlet();" id="lang2" name="lang" value="cpp">C++
    <input type="radio" onclick="callServlet();" id="lang3" name="lang" value="java">Java

<b>Select Program :</b>
                        <select id="combo">
                            <option>-Select Program-</option>
                        </select>

Here is my java script function which will called on clicking the radio button function:-

<script>
            function callServlet()
            {
                var d;
                $(function() {
                    d = $('input[name=lang]:checked').val();
                });
                console.log("value = " + d);
                $.ajax({
                    url: "AllProgramNameServlet",
                    type: "post",
                    data: {
                        language: d
                    },
                    success: function(msg)
                    {
                        for (i = 0; i < msg.length; i++)
                        {
                            var combo = document.getElementById("combo");
                            var option = document.createElement("option");                      
                            option.text = msg[i].programName;
                            option.value = msg[i].programName;
                            try {
                                combo.add(option, null); //Standard 
                            } catch (error) {
                                combo.add(option); // IE only
                            }
                        }
                    }
                });
            }
        </script>

Upvotes: 1

Views: 1363

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82251

You can first clear the dropdownlist before appending options using:

$('#combo').empty(); //empty the list

or for keeping first option and removing rest using:

$('#combo option:gt(0)').remove();

Upvotes: 2

Related Questions