Combobox Value Disappears After Select

Question

There are two comboboxes on my JSP page.The values of them are coming from a JSON page. When you select a value from the first combobox, then second combobox values are listed according to first combobox's id. The first combobox is for country name, the second is for city names.

<select onchange="ListCities()" id="ListCountries">
<%       String CountryId,CountryName;
         for(int k=0;k<= jsonarray.length()-1;k++ )
           {
           CountryId = jsonarray.getJSONObject(k).get("id").toString();
           CountryName = jsonarray.getJSONObject(k).get("name").toString();
           out.print("<option value=" + CountryId +">" +CountryName+ "</option>");
           }      
%>
</select> 

<select id="ListCities">
<%       String CityId,CityName; 
         for(int k=0;k<= jsonIlArray.length()-1;k++ )
           {
           CityId= jsonCityArray.getJSONObject(k).get("id").toString();
           CityName= jsonCityArray.getJSONObject(k).get("name").toString();
           out.print("<option value=" + CityId+">" +CityName+ "</option>");
           }  

%>

function ListCities() {
    var CountryIdFromCB = document.getElementById("CountryList").value;
    document.location.href = ('?CountryId='+ CountryIdFromCB); 
   }

The values of comboboxes are working properly. When you select any item from the first combobox(the second box are listed according to the first combobox's id), the JSP page passes the first combobox's id as parameter to the second combobox. BUT, the selected combobox item is disappeared when the page is refreshed. I would like to keep the first combobox's value even the user selects any item from second combobox.

I don't want to use JQuery, I am looking for pure Javascript solutions.

Thanks,Mark

If your page getting loaded while you are change country values, better idea is keep the selected country value in java variable and make your country selected by using javascript like document.getElementById("ListCountries").selectedIndex = Your_selected_country; — Vinoth Krishnan
By selectedIndex method, we can get the line number of that element in dropdown list. However, the stack number is different from the unique id of country. They are not same. For example, France is listed at 5th line in the list, but in fact France.id is 3. — Mark Karan

Loc Loc · Accepted Answer · 2013-12-19T14:36:52

The issue is not related to 'selectedIndex'. It relates to 'selected' attribute of select option.

You lost the first dropdown selected because you didn't process 'selected' attribute. here is the code of the first dropdown:

<select onchange="ListCities()" id="ListCountries">
<%
    String CountryId,CountryName;
    for(int k=0;k<= jsonarray.length()-1;k++ )
    {
        CountryId = jsonarray.getJSONObject(k).get("id").toString();
        CountryName = jsonarray.getJSONObject(k).get("name").toString();

        if (CountryId.equals(request.getParameter("CountryId")))
        {
            out.print("<option value=" + CountryId +" selected>" +CountryName+ "</option>");
        } else 
        {
            out.print("<option value=" + CountryId +">" +CountryName+ "</option>");
        }           
     }      
%>
</select>

Combobox Value Disappears After Select

1 Answers