Question

I am starting with this object,

public class myTO {

    private String id;
    private String name;
    }

Which is used in this object

public myCombiTO {
    private myTO myTO;

    private List<String> valueList;
    private List<String> displayList;
}

I create a list of these objects

List<myCombiTO> myCombiTOList = getMyCombiTOList();

I use this list to set a jsp page attribute

request.setAttribute("myAttrList", myCombiTOList);

And forward to the jsp page. I then use jquery and jstl to populate a drop down from this list

<select name="mYSelect" id="mySelect">
     <c:forEach var="myVar" items="${myAttrList}">
          <option value="${myVar.myTO.id}" >
               <c:out value="${myVar.myTO.name}" />
          </option>
    </c:forEach>    
</select>

My problem is I want to populate a second drop down using jquery with the values from mycombiTO.getValueList(). so far I have this

$("#mySelect").change(function(){
        var myJSList = ${myAttrList};
        var chosenGroup = $("#mySelect").val();
        var valueArray = myJSList.get(chosenGroup).valueList;
        var displayArray = myJSList.get(chosenGroup).displayList;
        var items = {'display':[displayArray], 'value':[valueArray]};

        //now populate drop downs

        $.populateSelect($('#myselect').get(0), items);

    });

jQuery.populateSelect = function(element,items) {
    $.each(items, function() {
            element.options[element.options.length]  = new Option(this.display,this.value);
          });
};

However its not working please help. I am having trouble creating the javascript object based on two arrays. Hwoever ideally I would want to reference a java map from jquery using key/value pairs. Is this possible ?

Thanks in advance.

Answer 1

Right now you’re passing in items which is an object with only two key/value pairs, so the $.each() is running for only two iterations. And for those iterations, this.display and this.value refer to the entire arrays.

One option would be to simply pass the displayArray and valueArray in to the populateSelect(), and iterate over those:

jQuery.populateSelect = function(element,displayArray,valueArray) {
    $.each(displayArray, function(i,val) {
        element.options[element.options.length]  = new Option( displayArray[i] ,valueArray[i] );
    });
};

Going back to your original code, you could also do this:

jQuery.populateSelect = function(element,items) {
    $.each(items.display, function(i,val) {
        element.options[element.options.length]  = new Option( items.display[i] ,items.value[i] );
    });
};