jQueryui Selectmenu - 保存值

Question

:) 我不知道如何将选定的 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 ) {}
});

我猜？但是在哪里插入我的"action"？ var map = X;？我的代码如何知道选择了哪个地图？

提前谢谢你:)

Answer 1

在你传递给selectmenu()的配置对象中，有一个select属性(a.k.a.key)。它的 value 是一个匿名函数（回调）。当您单击其中一个选项时，相应的事件会引发调用该函数。

您可以通过 $(this).val(); 获得 select 选项。

$(this) 是一个 jQuery 对象。在回调的上下文中，它是调用函数的元素。在JavaScript中，this关键字是一个非常重要和复杂的话题。您可以在 MDN and here in SO 中阅读相关内容。基本上，在您的情况下，$(this) 是被 select 编辑的 option 元素，触发了 click 事件。

val() 是 jQuery 对象的一种方法，即 returns 该对象的当前值。

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

jQueryui Selectmenu - 保存值

jQueryui Selectmenu - save value

javascript

jquery

jquery-ui

jquery-ui-selectmenu