Trying to add functionality to select option

Question

In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2. My problem here is when i have 2 or more results i should be able to: 1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed 2) After he saw the options there he clicks on one of them to activate function_2

The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first. Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)

Main problem here i think is the jquery selector, but im not sure if it can be done just with that. This is an example of what im trying:

// function_1 in ajax
.done(result){
  $.each(result.data,function (){
    $('#select_ex').append("<option value...... ></option>");
    if (result.count()===1){
      $('#select_ex').trigger('change');
    }
  });
}
$('#select_ex option').change(function(){// tried with change, click or focus
  function_2();
}

The html contains

<select name="select_ex" id="select_ex" size="0" ></select>

EDIT: Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click. Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me. So I came to seek for any fresh ideas.

EDIT2 I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)

$("#select_ex option[value='0']").each(function() {$(this).remove();});

The change event is triggered by the select element: `$('#select_ex').change(...)` not `$('#select_ex option ').change(...)` — chrisheyn, Mar 18 '19 at 15:05
is just an example. I mixed what i tried among what i already found. I want to trigger the event (be it change or other)on the option. Not on the select — Mbotet, Mar 18 '19 at 15:09
Looks like multiple issues. Triggering change on an option, **and** the `change` binding is happening outside the `done()`. — Taplar, Mar 18 '19 at 15:11
@Mbotet there is no change event on the option tag, you need to bind `change` to the select and the value when it changes will be the value of the option tag — Huangism, Mar 18 '19 at 15:11
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Taplar, Mar 18 '19 at 15:11
@Huangism the trouble with that is that i want a refresh on data if user clicks again on his name if only one and as imvain2 mentioned the problem is the default, so... not use for that — Mbotet, Mar 19 '19 at 07:32

imvain2 · Accepted Answer · 2019-03-18T15:16:10.610

2

Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.

I would recommend adding a "blank" option as the first option and setting it as selected.

var  $select_ex = $("#select_ex");  

.done(result){
      $select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
      $.each(result.data,function (){
        $select_ex.append("<option value...... ></option>");
      });

      $select_ex.val("0");
    }

    $select_ex.change(function_2);

edited Mar 18 '19 at 15:16

answered Mar 18 '19 at 15:11

imvain2

10,699
1
11
19

Nice and helpful answer, but this answer troubles me with the display. I am trying to show only the data options because of by external request. Im trying to avoid arguing with client. But I do like your approach. If i dont come with any better i'll accept yours – Mbotet Mar 19 '19 at 07:29

Trying to add functionality to select option

1 Answers1