jQueryui Selectmenu - save value

Question

:) I dont get how I can save the selected selectmenu-option into a variable? Here is my Selectmenu:

<script>
    $(function() {
        $("#map").selectmenu();
    });
</script>
<form action="#">
    <fieldset>
        <select name="map" id="map">
            <option value="London">London</option>
            <option value="Berlin">Berlin</option>
            <option value="Nevada">Nevada</option>
        </select>
    </fieldset>
</form>

I know that I need an Event. This Event would be select I guess. The jQueryui API Documentation (http://api.jqueryui.com/selectmenu/#event-select) gives the following Code example:

$( ".selector" ).selectmenu({
  select: function( event, ui ) {}
});

But ... what is the .selector in my case? #map?

So it would be

$( "#map" ).selectmenu({
  select: function( event, ui ) {}
});

I guess? But where to insert my "action"? The var map = X;? And how does my code know which of the maps is selected?

Thank you in advance :)

David · Accepted Answer · 2018-11-09T17:53:51.480

In the configuration object that you pass to selectmenu(), there is a select property (a.k.a. key). Its value is an anonymous function (a callback). When you click one of the options, the corresponding event raises invoking that function.

You can get the select option with $(this).val();.

$(this) is a jQuery object. In the context of the callback, it is the element which invokes the function. In JavaScript, the this keyword is a very important and complex topic. You can read about it in MDN and here in SO. Basically, in your case, $(this) is the option element that was selected, triggering the click event.

val() is a method of the jQuery object that returns the current value of that object.

Once you have the value, just assign it to your map variable.

var map = "";

$("#map").selectmenu({
  select: function(event, ui) {
    map = $(this).val();
    console.log(map);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<form action="#">
  <fieldset>
    <select name="map" id="map">
      <option value="London">London</option>
      <option value="Berlin">Berlin</option>
      <option value="Nevada">Nevada</option>
    </select>
  </fieldset>
</form>

Looks so easy... I would never figure that out on my own .. lol oO. Thank you so much! So "this" is the "value" of the selectmenu I guess. Thank you! — Kevin Jung, Nov 09 '18 at 17:39
Accepted the answer :). I am so thankful! Web development seems like a jungle to me :D — Kevin Jung, Nov 09 '18 at 17:43
To all of us when we start. Take your time reading the documentation of the new things that you experiment with. It will pay back. I edited the question with some links to the corresponding docs. (and to use a more accurate technical wording) — David, Nov 09 '18 at 17:56

jQueryui Selectmenu - save value

1 Answers1