javascript - jQueryui Selectmenu-保存值(value)

:)
我不知道如何将所选的selectmenu-option保存到变量中？
这是我的选择菜单：

<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>

我知道我需要一个活动。我猜这个事件应该是select。 jQueryui API文档（http://api.jqueryui.com/selectmenu/#event-select）提供以下代码示例：

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

但是...在我的情况下.selector是什么？ #map？

原来如此

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

我猜？但是在哪里插入我的“动作”？ var map = X;？我的代码又如何知道选择了哪些地图？

先感谢您 ：）

最佳答案

在传递给selectmenu()的配置对象中，有一个select属性（也称为key）。它的value是匿名函数（回调）。当您单击选项之一时，相应的事件引发该功能。

您可以使用$(this).val();获得选择选项。

$(this)是一个jQuery对象。在回调的上下文中，是元素调用了该函数。在JavaScript中，this关键字是一个非常重要且复杂的主题。您可以在MDN和此处的SO中阅读。基本上，对于您来说，$(this)是所选的option元素，触发click事件。

val()是jQuery对象的方法，该方法返回该对象的当前值。

一旦有了value，只需将其分配给您的map变量。

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>