jQueryui Selectmenu - сохранить значение - PullRequest
Новая
       27

jQueryui Selectmenu - сохранить значение

0 голосов
/ 09 ноября 2018

:) Я не понимаю, как я могу сохранить выбранную опцию 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>

Я знаю, что мне нужно событие. Это событие будет select Я думаю. Документация API jQueryui (http://api.jqueryui.com/selectmenu/#event-select) дает следующий пример кода: 

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

Но ... что такое .selector в моем случае? #map

Так было бы 

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

Думаю? Но куда вставить мое «действие»? var map = X;? И как мой код узнает, какая из карт выбрана?

Заранее спасибо:)

1 Ответ

0 голосов
/ 09 ноября 2018

В объекте конфигурации, который вы передаете selectmenu(), есть свойство select (a.k.a. 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>
...