CODEWITHSUNDEEP
javascriptjquerydrop-down-menuonchange
Riju Mahna
Riju Mahna

Reputation: 6926

Trigger dropdown 'onChange' programmatically

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:

  1. Find which value is selected after load, if any
  2. 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.

Upvotes: 0

Views: 152

Answers (3)

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

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/

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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>

Upvotes: 0

Daniel
Daniel

Reputation: 3370

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.

Upvotes: 1

Related Questions