0

i have been struggling with this for the past 6 hours but i can't find a solution. I'm using jquery mobile 1.4.5. I have a select with 5 options. They are all selected and when one is deselected i want to do something. So i'd like to get the id of the deselected option. This is my 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

The "hide social" and "show social" work. And i want to be able to have their behavior inside the select. So instead of 2 buttons (1 showing, 1 hiding) I have a select option when checked shows the element and when unchecked hides it. Idem for the other 4 options.

So how can i solve this?

Lagastic
  • 93
  • 1
  • 11

1 Answers1

0

You can use the on('change') function provided by jquery:

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

jquery select change event get selected option

Community
  • 1
  • 1
Alex McMillan
  • 17,096
  • 12
  • 55
  • 88
  • Thank you for the quick response. I tried it and it doesn't seem to work. `$('#filter-type').on('change', function (e) { var optionSelected = $("option:selected", this); console.log(optionSelected); alert(optionSelected); var valueSelected = this.value; alert(valueSelected); });` – Lagastic May 17 '15 at 17:54
  • Think about it. What element are you attaching the handler to? What does `this` mean inside that function? – Alex McMillan May 17 '15 at 17:56
  • You're attaching the handler to the `#filter-type` element - which is the `select`. The `select` doesn't have a `value`. The `select` contains `option` elements, which *do* have `value`s. You've grabbed all the selected options and put them in the `optionSelected` variable. Inspect that a little in the console. Btw: avoid `alert(value)` - log things to the console, where you can right-click -> store as global variable, and then you can interact with them. – Alex McMillan May 17 '15 at 17:59
  • Oh ok thanks. So how would i access the option(s) that is/are selected? And when you say console, do you mean the one in google chrome? And is it normal that even 'alert(optionSelected)' didn't do anything? – Lagastic May 17 '15 at 18:06
  • `alert` can only show you a string in a box. There's FAAR more to Javascript than strings :) All modern browsers have a "developer tools" area with various tools for showing network traffic, debugging etc, but yet - Chrome is a good choice. F12 or Ctrl-Shift-I or menu -> more tools -> developer tools. As a coder I have this open in every window 100% of the time. – Alex McMillan May 17 '15 at 18:08
  • So now i have done this: `$('#filter-type').on('change', function (e) { var optionSelected = $("option:selected", this); console.log(optionSelected); var valueSelected = this.value; console.log(valueSelected); });` and nothing appeared in the console. Am i doing something wrong or is their and underlying issue? – Lagastic May 17 '15 at 18:18
  • Are you changing the selected options? Where are you putting that code? If you're not working with any structure to your application, just make sure you put that code in a ` – Alex McMillan May 17 '15 at 18:25
  • I click the options and nothing happens. I'm working inside a listview in a jquery mobile content-div. The code is as you said at the bottom inside a script tag inside a $(document).on.... function. – Lagastic May 17 '15 at 18:34
  • What happens if you put `console.log(1)` as the first line inside that handler, then reload the page and click the options? Do you see a `1` appear in the console when you click? I'm sorry but I can't be much more help without seeing your actual code / being in a seat next to you. – Alex McMillan May 17 '15 at 18:36
  • Doing this: `$(document).on('ready', function () { $('#filter-type').on('change', function (e) { console.log(1); }); });` _nothing_ happens. I think there might be an underlying problem. – Lagastic May 17 '15 at 18:43
  • Play in the console. Type lines like `document.body.innerHTML = '
    POTATO
    ';` and `$('.pie').on('click', function () {console.log("WORKS");});` then click the div and see what shows up in the console. Make sure you're using jQuery and not the browser `$`. You really have to investigate the environment you're running in - and the console is the best place for that. Play with it - lots. Get familiar with it.     – Alex McMillan May 17 '15 at 18:46
  • I'll do that. And i think my problem might be due to the fact that the select menu is in a jquery popup. Looking all over the internet i haven't found a solution for it yet. With the 'hide social' and 'show social' i have no problems and i can log to the console. But it's with the selectt menu that i have problems. – Lagastic May 17 '15 at 19:00
  • Could you point me in the right direction to learn more about this? – Lagastic May 17 '15 at 19:30