javascript - 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;?我的代码如何知道选择了哪个 map ？

提前谢谢你:)

Answer 1

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

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

$(this) 是一个 jQuery 对象。在回调的上下文中，它是调用函数的元素。在 JavaScript 中，this 关键字是一个非常重要且复杂的主题。您可以在 MDN 中阅读相关信息在这里 SO .基本上，在您的情况下，$(this) 是选择的 option 元素，触发 click 事件。

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

获得值后，只需将其分配给您的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>