Javascript event when prefilled option is selected

Question

I have a table full of select elements, some of which are prefilled with suggestions for a data migration project I'm working on. I know how to listen for a change event (jQuery) but I also want to listen for when the user selects the suggested option. Is that possible?

I tried listening for a click but that only gets called when the select box is opened not when its closed.

Update

A simple reproduction of the problem -

HTML -

<select>
  <option value="">One</option>
  <option value="" selected>Two</option>
  <option value="">Three</option>
</select>

<p></p>

JS

$('select').change(function() {
    $('p').append('x');
});

https://jsfiddle.net/sh9n2cvg/

Update 2

The best I've found so far is this, but its still a little buggy -

$('select').click(function() {
    $(this).val("");
    $(this).trigger('change');
});

Update 3 I don't think what I'm trying to do is possible. This is my workaround - https://stackoverflow.com/a/5859221/772309

Answer 1

I'm not sure that it's possible with the default select element. If you don't mind using a simulated select element, you could do something like this:

var was = $('select').val();
$('select')
  .selectmenu()
  .on('selectmenuclose',function(event){
    var is = $('select').val();
    if(was == is) {
      $('p').append("<br>reselected "+is);
    }
    else {
      $('p').append("<br>changed to "+is);
    }
    was = is;
  });

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<select>
  <option value="one">One</option>
  <option value="two" selected>Two</option>
  <option value="three">Three</option>
</select>

<p></p>

---

If you just want it such that the trigger only happens when an option is selected (rather than also on blur, etc.), this would do the trick:

var was = $('select').val();
$('select')
  .selectmenu()
  .on('selectmenuselect',function(event, ui){
    var is = ui.item.value;
    if(was == is) {
      $('p').append("<br>reselected "+is);
    }
    else {
      $('p').append("<br>changed to "+is);
    }
    was = is;
  });

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<select>
  <option value="one">One</option>
  <option value="two" selected>Two</option>
  <option value="three">Three</option>
</select>

<p></p>

Answer 2

You could do something like this.

If you need to do something always on default selected option, you need to identify the default option so, whenever, the option is selected, you could trigger appending x.

// I want it to output "x" when "Two" is reselected
$(function() {
  $('select').change(function(e) {
    if ($("option:selected", $(e.currentTarget)).attr("data-default")) {
      $('p').append('x');
    }
  });

  $('select').each(function(idx, ele) {
    $("option:selected", $(ele)).attr("data-default", "true")
  });

  $('select').change();



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">One</option>
  <option value="" selected>Two</option>
  <option value="">Three</option>
</select>

<p></p>

If you are looking to append x to p for all change events and for the initial default selection, here is what you could do.

// I want it to output "x" when "Two" is reselected
$(function() {
  $('select').change(function(e) {
    $('p').append('x');
  });

  $('select').change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">One</option>
  <option value="" selected>Two</option>
  <option value="">Three</option>
</select>

<p></p>

Answer 3

You can substitute <ul>, <li> elements for <select>, <option> elements; style ul, li elements to be displayed as select, option menu, use click event to select li element

$(function() {

  var p = $("#select + p");
  
  var options = ["One", "Two", "Three"];
  
  $.each(options, function(index, option) {
    $("<li>", {    
      html: "\n" + option,
      appendTo:"#select",
      css: {
        listStyle: "none",
        width: "142px",
        padding: "8px",
        margin: "1px",
        outline: "1px solid #000",
        fontFamily: "arial",
        height:"16px",
        backgroundColor:"#eee"
      },
      on: {
        "mouseenter": function() {
          if (!$(this).is("li:first")) {
            $(this).css("backgroundColor", "orange")
          }
        },
        "mouseleave": function() {
          $(this).css("backgroundColor", "#eee")
        }
      }
    })
  });

  $("#select li:not(:first)")
    .hide()
    .siblings(":first")
    .clone(true)
    .hide()
    .insertAfter("#select li:first")
    .parent()
    .click(function(e) {
      if ($(e.target).is("li:first")) {
        $(e.target).closest("li").siblings().toggle()
      } else {
        $(e.target).closest("ul")
        .find(":first")
        .html($(e.target).closest("li").html())
        .trigger("mouseleave")
        .siblings().toggle();
        p.append("x" + $("li:first").text() + "<br>")
      }
    })
});

ul {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  -webkit-padding-start: 0px;
  width: 160px;
  height: 32px;
  left: 24px;
  position: relative;
}
ul li:nth-child(1) {
  background-color:buttonface !important;
}
ul li:nth-child(1):after {
  position: absolute;
  content: "▼";
  right: 10px;
  top: 10px;
  font-size: 12px;
  opacity: .75;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul id="select" class="select"></ul>
<p></p>

Answer 4

Using the jQuery change event, you can check to see whether the user's selection choice matches the suggested option that the system has in mind by using $('yourselect').val() to see what the select option selected value is.

$('yourselect').on('change', function() {
    var selected = $(this).val();
    if(selected === 'Expected') {
        // do this
    }
});

Answer 5

You can use the native DOM APIs, as an alternative to jQuery, to test the value of your select quite easily. This approach does require that you set the value of each option to some unique string; below I just used whatever you had as the display text.

document.getElementById('example-select').addEventListener('change', function () {
    console.log(this.value)
    
    if (this.value === 'Two') {
        // do stuff
        document.getElementById('example-output').textContent += 'x'
    }
});

<select id="example-select">
  <option value="One">One</option>
  <option value="Two" selected>Two</option>
  <option value="Three">Three</option>
</select>

<p id="example-output"></p>