Question

I have a play 2 framewrok project with java.
In the view files , there is a drop down list which is populated by a method in the controller class.
In addition to the drop down list , I also have a json data structure that is populated by javascript methods and event listeners in the view file.
Now I want a way to add the selected item from the drop down list to the json object.
I have provided snippets of the codes below.

this is the code for the drop down list :

 <select class = "selectone">
  @for(gesture <- gesturesList){
      <option value = @gesture.id>
        @gesture.getName()
      </option>
  } 
  </select>

I have below code snippets from the the javascript and json object

 <script type="text/javascript" charset="utf-8">

     /* this is our websocket connection */       
var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
var socket = new WS("@routes.Application.webSocket().webSocketURL(request)")

/* this is the json object , it contains x and y coordinates from HTML5 canvas */              
          var jNode =  {"x":arrayX,"y":arrayY }  


 /* this is a jquery function for tranmitting  json object through the websocket */                        

        $('button.add').click(function() { 
             socket.send(JSON.stringify(jNode));})                                 
     </script>       
}

can someone kindly show me how to add the item selected from the drop down list to the json object so that we have something like the following in the json object:

var jNode = {“x”:arrayX,”y”:arrayY , “item” : Itemselected}

thank you all

Answer 1

You should realize that’s a JS+HTML topic, so showing Play’s view has no sense for JS geeks…

Anyway as you are using jQuery, use it also to get the val(). BTW remember it should be placed inside some event (ie: click()) otherwise it will copy value which was set after page load and won’t change it):

 <select class = "selectone">
     <option value="0">Choose</option>
     <option value="1">Gest 1</option>
     <option value="2">Gest 2</option>
     <option value="3">Gest 3</option>
 </select>

 <script type="text/javascript" charset="utf-8">
      // ...
    $('button.add').click(function() { 
        var jNode = {"x":arrayX,"y":arrayY , "item" : $("select.selectone").val()};
        socket.send(JSON.stringify(jNode));
    });
      // ...                                 
 </script>   

From val() API:

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier