如何更改下拉值并在javascript中触发onchange函数

I was wondering if it is possible to change a value of a dropdown box dynamically and to trigger an ajax onchange function assigned to this dropdown at the same time.

so far I can only change the value of a dropdown box but the onchange function is not being called.

here is the dropdown:

<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
  <option value="">--Select Item--</option>
  <option value="one"> Option one</option>
  <option value="two"> Option Two</option>
  <option value="three"> Option Three</option>
</select>

when I do this operation:

document.getElementById("ProductSelector").value = "one";

the value of the dropdown is changing, but the getItems function is not being triggered.

What am I doing wrong or may be there is another way to change a value of the doropdown which will allow me to trigger my ajax function as well?

I don't want to use JQuery. I just wandering why the function is not working if I use dinamic change and on manual change it works fine?

So, you are changing the value with JavaScript and the change event isn't triggering. So, lets trigger it then.

Trigger the event change every time you change the value via JavaScript.

No jQuery used.

Try this:

function changeVal() {
  var elem = document.getElementById("ProductSelector"),
    event = new Event('change');

  elem.value = "one";
  elem.dispatchEvent(event);
}


function getItems(val) {
  alert(val);
}

changeVal();

<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
  <option value="">--Select Item--</option>
  <option value="one">Option one</option>
  <option value="two">Option Two</option>
  <option value="three">Option Three</option>
</select>

</div>

You can try removing the onchange="" attribute from the select input and just use the jQuery to check for changes:

$('body').on('change', "#ProductSelector", function(){
  var id = $(this).val();
   //now do your ajax call with the value selected
});

"What am I doing wrong or may be there is another way to change a value of the doropdown which will allow me to trigger my ajax function as well?"

Another way of adding the event listener is by doing it "unobtrusive style".

document.getElementById('ProductSelector').addEventListener('change', function(event) {
  getItems(event.target.value);
});

function getItems(val) {
  // Todo: whatever needs to be done :-)
  alert(val);
}

<select name="ProductSelector" id="ProductSelector">
  <option value="">--Select Item--</option>
  <option value="one">Option one</option>
  <option value="two">Option Two</option>
  <option value="three">Option Three</option>
</select>

http://jsfiddle.net/dytd96cb/

</div>

I mostly do it this way:

HTML:

<select class="class-name">

    <option value="1">1</option>
    <option value="2">2</option>

</select>

jQuery:

$(".class-name").on("change", function() {

    var value = $(this).val();

    $.ajax({

        type: "post",
        url: "your-php-script.php",
        data: { 'value' : value },
        success: function (data) {

             alert('This has changed');

        }

    );    

});

Problem is changing the value with JS will not trigger the change event. Best solution would be to write a function which changes the value and triggers the change event manually.

HTML

<select name="ProductSelector" id="ProductSelector">
    <option value="">--Select Item--</option>
    <option value="one"> Option one</option>
    <option value="two"> Option Two</option>
    <option value="three"> Option Three</option>
</select>

JS (no jQuery)

//define the element so we can access it more easily
var element = document.getElementById('ProductSelector');
//define the event we want to trigger manually later
var event = new Event('change');

//add eventlistener which is triggered by selecItem()
element.addEventListener('change', function(event) {
    getItems(event.target.value);
});

function getItems(val) {
    alert(val);
}

//set the value and trigger the event manually
function selectItem(value){
    //select the item without using the dropdown
    element.value = value;
    //trigger the event manually
    element.dispatchEvent(event);
}

//using a function with the option you want to choose
selectItem("three");

JSFiddle

Use the working JSFiddle: Note that you have to uncomment the last line of code.

<html>

<body>


Select your favorite value:
<select id="mySelect">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
  <option value="value3">value3</option>
  <option value="value4">value4</option>
</select>


<script>

$(document).ready(function() {

  $( "#mySelect" ).change(function() {



    var value = $(this).val();      

    $.ajax({

        type: "post",
        url: "request-url.php",
        data: { 'value' : value },
        success: function (data) {

             alert('the ajax request has been send');

        }

    );    


}); 


});


</script>


</body>
</html>