使用jQuery或JavaScript更改变量的值

Question

Here I have a function which return me a list of places object based on google places API So function findPlaces is:

function findPlaces(boxes,searchIndex) {
   var request = {
       bounds: boxes[searchIndex],
            types: ["restaurant"]
   };

How I want to change this variable request - types on change on list menu so this is HTML:

<label for="select"></label>
        <select name="select" id="select">
          <option>restaurant</option>
          <option>bar</option>
          <option>museum</option>
          <option>gas_station</option>
        </select>

SO I need when I change value on list/menu to change also variable request - types["newValue"]

How I can do that?

I was try with this code but dont work:

function findPlaces(boxes,searchIndex) {
   var request = {
       bounds: boxes[searchIndex],
            types: document.getElementById("select")[document.getElementById("select").selectedInd‌ex].value
   };

and also try with this code but again dont work:

$("#select").change(function(){

        var values= $('#select option').map(function(){
                        return this.value;
                    }).get();
        var index=jQuery.inArray($(this).val(), values);

        findPlaces(boxes, index);


    });
function findPlaces(boxes,searchIndex) {
       var request = {
           bounds: boxes[searchIndex],
                types: [index]
       };

How I can do that? So first I need to on change value in HTML change the variable request - types["value"] and update the function findPlaces ???

Answer 1

Is it a singleSelect or a multiSelect? But anyway you could try this:

function findPlaces(boxes,searchIndex) {
   var request = {
       bounds: boxes[searchIndex],
       types: [$("#select").val()]
   };
}

Just use the jQuery object to select the #select element and use it's value (the selected element) as type.

Answer 2

You must take care of using DOM methods inside your objects, because you have to respect the mvc model.

I suggest that you expose the types variable as a method and in the code that you change this type you call a method passing the new type.

function Places(){
    var type = "";// you could set a default value

    function findPlaces(boxes,searchIndex) {
       var request = {
           bounds: boxes[searchIndex], 
           types: [type]
       };
    }

    function changeType(value){
        type = value
    }

}

So you're using js OO, and could call changeType when the selection element change.

var _place = new Places();

$("#selectionElement").change(function(){
    _place.changeType($(this).value);
});

EDIT1:

I made a example at fiddle: http://fiddle.jshell.net/R3xb7/1/

EDIT2:

The example with your tool: http://jsbin.com/ujExolI/1/