Dynamic Drop Down

[Keith Harrison]

In a JSP, I would like to know how to dynamically change values in selection box 2, based on selection box 1. All values will be predetermined.

For example
Selection box 1 values, 'House', 'Shop'

Selections in box 2 based on selecting 'House' would be 'Semi Detached', 'Detached', 'Appartment', 'Mansion'

Selections in box 2 based on selecting Shop' would be 'Electrical Store', 'Grocery Store', 'Clothing Store', 'Car Spares'

How would the page refresh once you have chosen a value?

Thanks in advance.

[marc weber]

Originally posted by Keith Harrison:
...How would the page refresh once you have chosen a value? ...

Well, it would sure be nice if you didn't need to "refresh" the page (get the server to provide a new version) every time the user picks an option, right?

This sounds like something that would be better if programmed on the client (browser) side, so that the options can change without going back and forth with the server. For that, something like JavaScript would be good.

I'm going to go out on a limb, and move this to the JavaScript forum.

[Eric Pascarello]

I am coding this here in this textarea so hopefully there will be no bugs!

<script>
//Set up object with the possible values
var selectOptions = new Object();
selectOptions['House'] = new Array('Semi Detached', 'Detached', 
                                   'Appartment', 'Mansion');
selectOptions['Shop'] = new Array('Electrical Store', 'Grocery Store', 
                                  'Clothing Store', 'Car Spares');
 
 
  function AddOptions(selectedItem){
    //reference select
    var sel = document.getElementById("select2")
    //Remove items
    sel.options.length = 0;
    //Make sure the top item was not selected
    if(selectedItem==-1)return true;
    //loop through array
    for(var i=0;i<selectOptions[selectedItem].length;i++){
      //Create a new option (text,value)
      var newOpt = new Option(selectOptions[selectedItem][i],
                              selectOptions[selectedItem][i]);
      //append it to the options list
      sel.options[sel.options.length] = newOpt;
    }
  }
 
</script> 
<!-- onchange calls function with value of selected item -->
<select name="select1" id="select1" onchange="AddOptions(this.value)">
  <option value="-1">Pick one</option>
  <option value="House">House</option>
  <option value="Shop">Shop</option>
</select>
<!-- Second Select Element --> 
<select name="select2" id="select2"></select>

Eric
[ August 17, 2006: Message edited by: Eric Pascarello ]

[Keith Harrison]

Thats very helpful. Thanks very much Eric.

[Keith Harrison]

Referring to the previous post by Eric, does anybody know a way that I can set the selected option if I know its value?

For example, I have a subCategory value that�s being passed back from a Servlet as a request attribute and would like to set the relevant option as selected.

The array is declared as follows:
selectOptions['SHEETS'] = new Array('Choose a sub category','Flat', 'Centre Folded', 'Multi Folded');

On loading the page, I want to assign the option 'Flat' as being selected within the following code:


//Create a new option (text,value)
var newOpt = new Option(selectOptions[selectedItem][i], selectOptions[selectedItem][i]);
//append it to the options list
sel.options[sel.options.length] = newOpt;

Any help or guidance will be appreciated.

Thanks very much.

[Eric Pascarello]

You can, have to call the function onload and have the servlet set a variable or hidden field with the value that needs to be selected.

var selectedValue = "<% asdf %>";
window.onload = function(){
  var sel = document.forms[0].selectName;
  var val = sel.options[sel.selectedIndex].value;
  AddOptions(val,selectedValue);
}

change AddOPtions to accept new parameter

function AddOptions(selectedItem,preSelected){

change code to see if we should select it

var bSelected = (preSelected == selectOptions[selectedItem][i]);
var newOpt = new Option(selectOptions[selectedItem][i],
                        selectOptions[selectedItem][i],
                        bSelected);

Eric
[ October 30, 2006: Message edited by: Eric Pascarello ]

[Keith Harrison]

Thanks Eric.

I can see the logic behind your reply but I cant seem to piece it together. At the beginning of my page I obtain the request attributes:

String category = (String)request.getAttribute("category") ;
if(category == null) category = "";
 
String subCategory = (String)request.getAttribute("subCategory") ;
if(subCategory == null) subCategory = "";

Then further down my page I have the select objects:

<select name="category" id="select1" onchange="AddOptions(this.value)">
<option value="-1" >Pick one</option>
<option value="BAGS">BAGS</option>
<option value="COVERS">COVERS</option>
<option value="LINERS">LINERS</option>
<option value="SHEETS">SHEETS</option>
<option value="HANDMADE">HANDMADE</option>
<option value="MATERIALONLY">MATERIALONLY</option>
<option value="BUBBLE">BUBBLE</option>
</select>
 
<select name="subCategory" size="1" id="select2" onchange="toggleOther(document.frmSearch.select2.options[ document.frmSearch.select2.selectedIndex ].value );">
</select>

Is there an easier way to set the select1 option instead of doing this:

<%[B]if(category.equals("BAGS"))[/B]{%>
<option value="-1">Pick one</option>
<option [B]selected [/B]value="BAGS">BAGS</option>
<option value="COVERS">COVERS</option>
..
 
<%}[B]else if(category.equals("COVERS"))[/B]{%>
<option value="-1">Pick one</option>
<option value="BAGS">BAGS</option>
<option [B]selected[/B] value="COVERS">COVERS</option>
..

Once I have set the select1 (category) option, I need to call the onchange AddOption function to fill select2 (subCategory). I then need to call the select2 toggleOther function which already enables or disables other input boxes.

Thanks again.

[Ben Souther]

Originally posted by Keith Harrison:
...
Is there an easier way to set the select1 option instead of doing this:

<%[B]if(category.equals("BAGS"))[/B]{%>
<option value="-1">Pick one</option>
<option [B]selected [/B]value="BAGS">BAGS</option>
<option value="COVERS">COVERS</option>
..
 
<%}[B]else if(category.equals("COVERS"))[/B]{%>
<option value="-1">Pick one</option>
<option value="BAGS">BAGS</option>
<option [B]selected[/B] value="COVERS">COVERS</option>
..

....

Yes.
If you have to use scriptlets you can do something like..

 
<%
String[] itms = new String[]{"BAGS",
                             "COVERS",
                             "LINERS",
                             "SHEETS",
                             "HANDMADE",
                             "MATERIALONLY",
                             "BUBBLE"};
String selItem = request.getParameter("category");
%>
<html>
  <head>
  </head>
  <body>
    <%=selItem%>
    <form method="post">
      <select name="category">
        <%for(int i = 0; i < itms.length; i++){%>
          <option value="<%=itms[i]%>" [B]<%=itms[i].equals(selItem) ? "selected" : ""%>[/B]><%=itms[i]%></option>
        <%}%>
      </select>
      <br />
      <input type="submit" />
    <form>
  </body>
</html>

It can be done more cleanly with JSTL/EL but this should save you a little typing.
[ October 30, 2006: Message edited by: Ben Souther ]

[Keith Harrison]

That�s great thanks Ben, it worked a treat.

Setting select1 using your solution works fine but I want select2 to have a selected option. Eric showed me a way of doing this further up the same post but for some reason its not getting recognised.

<script type="text/javascript">

var selectedValue = "<%=subCategory%>";

window.onloaad = function(){
var sel = document.frmSearch.select1;
var val = sel.options[sel.selectedIndex].value;
AddOptions(val,selectedValue);
}
</script>

What I am finding is when the page loads, the two select objects get populated but select2 always has 'Choose a sub category' as the selected option when 'Flat' is being returned from the servlet.

Any ideas?

Thanks very much.
[ November 01, 2006: Message edited by: Keith Harrison ]

[Keith Harrison]

Sorry to bring this one up again Eric but I have tried meddling with this problem numerous times now and cannot find a solution.

The answer may be simple but I cannot fathom it out!

When my page reloads with records returned by a search, Select2 does not have the correct option selected, even though your example does correctly evaluate the right option to be selected. Three options are being created and even though the second option should be selected, the first always gets selected.

Thanks for any help you can offer

Keith.

[Neerav Narielwala]

You can even do it using AJAX... www.fornewbie.com/article/php/create_ajax_dynamic_drop_down_list_using_php_-_xajax.html