JQuery Mobile: quando uma opção é selecionada: faça alguma coisa. (mostrar / ocultar elemento) - javascript, jquery, jquery-mobile, html-select

eu tenho lutado com isso nos últimos 6horas, mas não consigo encontrar uma solução. Estou usando o jquery mobile 1.4.5. Eu tenho um select com 5 opções. Eles são todos selecionados e quando um é desmarcado, quero fazer alguma coisa. Então, eu gostaria de obter o ID da opção desmarcada. Este é o meu html:

<ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
<li data-role="list-divider"><h2>Upcoming events <button data-role="none" class="filter" type="submit">
<i class="fa fa-filter"></i>
</button><button onclick="hide()">Hide social</button><button onclick="show()">show social</button><h2></li>
<div class="ui-field-contain sixtynine" data-position-to="window">
<select name="select-custom-19" id="filter-type" multiple="multiple" data-native-menu="false">
<option>Filter events</option>
<option value="1" selected="selected" id="f-1">family</option>
<option value="2" selected="selected" id="f-2">friends</option>
<option value="3" selected="selected" id="f-3">business</option>
<option value="4" selected="selected" id="f-4">social</option>
<option value="5" selected="selected" id="f-5">private</option>
</select>
</div>
<li data-role="list-divider"><h2>Today<h2></li>
// irrelevant

O trabalho "esconder social" e "mostrar social". E eu quero poder ter o comportamento deles dentro do select. Então, em vez de 2 botões (1 mostrando, 1 ocultando), tenho uma opção de seleção quando marcada mostra o elemento e quando desmarcada o oculta. Idem para as outras 4 opções.

Então, como posso resolver isso?

Respostas:

Você pode usar o on("change") função fornecida pelo jquery:

$("#filter-type").on("change", function (e) {
var optionSelected = $("option:selected", this);
console.log(optionSelected);
var valueSelected = this.value;
....
});

jquery select change event opção selecionada