Update textfield based on combobox selection using JQuery - accessing list problem

I have a Spring MVC application, use JSP+JQuery for view, and what I need is to, based on combo box selection (which gets me an index of element in list) to populate text field.

listProduct - list of products that is in the model

<form:form开发者_运维知识库 method="POST" commandName="productForm" name="insertRacun">
<table>
 <tr>
  <td class="ui-widget">Product:</td>
    <td><form:select path="productListId" id="productCombobox">
        <form:options items="${listProduct}"itemLabel="name" itemValue="productId"/>
        </form:select>
    </td>
  <td class="ui-widget">Product price:</td>
                <td><form:input path="priceList"
                        class="ui-widget ui-widget-content" id="priceInput" />
                </td>


<script type="text/javascript">
var comboIndex = $("#productCombobox").val();
$("#priceInput").val(${listProduct[comboIndex].price})      
    });
</script>

My question is: When i put number in listProduct[] i.e. listProduct[0] it works just fine and price field gets populated, but when i want put "comboIndex" in brackets, it does nothing.

If there is another solution (not using JQuery), please post it

You are mixing client and server side code. You cannot pass a JS variable to your server code, as your server code is parsed before the page has been served up to the client.

You will need to pass the price corresponding to a particular product ID to the client by other means.

The relevant code (probably in a change event handler) should reference productCombobox selectedIndex instead:

 var comboIndex = $("#productCombobox").attr("selectedIndex"); //
 $("#priceInput").val(${listProduct[comboIndex].price});