Trigger dropdown 'onChange' programmatically

Question

I am populating a dropdown on page load using some business logic and one of the values MAY (or may not) be selected, depending on the if conditions.

I am not able to:

Find which value is selected after load, if any

trigger the 'onChange' function for that dropdown using that selected value, if any value was selected

A sample code I am trying is here: http://jsfiddle.net/v7QWd/1203/

<div id="outerDiv">

<select id="myDropdown" class="check">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</div>


$(document).ready(function () {

    //call on load
    someFunction();

     $(document).on('change', '#myDropdown', function() {
        localStorage.setItem('selected_val', $(this).val());
       alert($(this).val());

    });

    function someFunction(){
    var mycondition = "true";
    //run busines slogic
    var htmlVar = "";
    if(mycondition == 'true'){

    htmlVar = '<select id="myDropdown" class="check">'+
        '<option value="one">one</option>'+
        '<option value="two">two</option>'+
        '<option selected = "selected" value="three">three</option>'+
        '<option value="four">four</option>'+
        '</select>';
    }

    $("#outerDiv").empty();
    $("#outerDiv").append(htmlVar);

    }
});

The function should fire itself for the value 'three' (value can change based on run time conditions). So basically, on page load, 'three' should be alerted in this example.

Daniel · Accepted Answer · 2018-05-17 20:49:25Z

1

You can call the change event manually at page load:

$("#myDropdown").change();

This will need to happen after someFunction() or #myDropdown won't exist yet.

answered May 17, 2018 at 20:49

Daniel

3,3901 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed-Yousef · Accepted Answer · 2018-05-17 21:16:13Z

1st: No need to use empty() then .append() you can directly use html()

2nd: The change event won't run because the element not presents to the DOM yet so you need to check the html() is finished .. you'll need to use $.when().then()

3rd to trigger the event you can use .change() like @Daniel said .. after the change() event not before it

$(document).ready(function () {
  // change event
  $(document).on('change', '#myDropdown', function() {
    //localStorage.setItem('selected_val', $(this).val());
    alert($(this).val());
  });
  
  //call on load
  $.when(someFunction()).then(function(){
    $('#myDropdown').change();
  });
});

// functions
function someFunction(){
  var mycondition = "true";
  //run busines slogic
  var htmlVar = "";
  if(mycondition == 'true'){

  htmlVar = '<select id="myDropdown" class="check">'+
  '<option value="one">one</option>'+
  '<option value="two">two</option>'+
  '<option selected = "selected" value="three">three</option>'+
  '<option value="four">four</option>'+
  '</select>';
  }

  $("#outerDiv").html(htmlVar);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="outerDiv"></div>

Trimantra Software Solution · Accepted Answer · 2018-05-18 04:42:09Z

try below

$(document).ready(function () { someFunction(); dropDownChange($('#myDropdown')); $(document).on('change', '#myDropdown', function() { dropDownChange($(this)); }); function dropDownChange(e){ localStorage.setItem('selected_val', e.val()); alert(e.val()); }; function someFunction(){ var mycondition = true; var htmlVar = ""; if(mycondition){ htmlVar = '<select id="myDropdown" class="check">'+ '<option value="one">one</option>'+ '<option value="two">two</option>'+ '<option selected = "selected" value="three">three</option>'+ '<option value="four">four</option>'+ '</select>'; } $("#outerDiv").html(htmlVar); }; });

http://jsfiddle.net/v7QWd/1207/

Collectives™ on Stack Overflow

Trigger dropdown 'onChange' programmatically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related