How to clear a listbox value when another listbox value selected

Question

I have created a depending on radio button click listbox will display now if user click a one radio button listbox will display and again user select other option but its not clear a previous value of listbox how to clear it by javascript????

<script language="JavaScript"  type="text/javascript">
        function fun(s)
        {

             if(s==B)
            {
                  document.getElementById("maingroup").style.display='none';
                  document.getElementById("subgroup").style.display='';
                  document.getElementById("itemname").style.display='none';

              }

             if(s==C)
            {
                 document.getElementById("maingroup").style.display='none';
                 document.getElementById("subgroup").style.display='none';
                 document.getElementById("itemname").style.display='';


              }


        </script>

Here is the example which i have tried JS FIDDLE

Answer 1

This is my idea(not tested). Give every your listbox a class name like class='lst' . After that when you click on a radio button just use:

  `document.getElementsByClassName('lst').style.display = 'none';`

and show current listbox.

`document.getElementsByClassName('currentListboxID').style.display = 'block';`

Here is DEMO

Answer 2

Try this:

var listBox = document.getElementById("listboxID");
listBox.innerHTML = "";

Answer 3

I think show/hide method is not good for programming.

I dont know whether it is useful or not but this might be helpful to you.

You can make it dynamic like

var mainGroup = ["aa","bb","cc"];
var subGourp = ["dd","ee","ff"];
var itemName = ["gg","ee","ff"];

var Country = ["jj","hh","ii"];
var Zone = ["kk","ll","mm"];

if(s == A)
{
    var i=0;
    var str = "";
    for(i=0;i<mainGroup.length;i++)
    {
        str += "<option value='" + (i+1) + "'>" + mainGroup[i] + "</option>";

    }
    document.getElementById("maingroup").style.display='';
    document.getElementById("maingroup").innerHTML = str;
}
else if(s == B)
{
    var i=0;
    var str = "";
    for(i=0;i<subGourp.length;i++)
    {
         str += "<option value='" + (i+1) + "'>" + subGourp[i] + "</option>";

    }
    document.getElementById("maingroup").style.display='';
    document.getElementById("maingroup").innerHTML = str;
}