CODEWITHSUNDEEP
javascriptjqueryhtml
Mbotet
Mbotet

Reputation: 180

Trying to add functionality to select option

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();});

Upvotes: 0

Views: 173

Answers (1)

imvain2
imvain2

Reputation: 15847

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);

Upvotes: 2

Related Questions