Triggering click on button when select option changes doesn't work properly

Question

I have the following code to trigger a click on a button whenever the state changes:

$('#selectstate').on('change', function(){
    $("[name='update']:submit").trigger("click");
});

It works fine, but the problem is that I have to click exactly on the arrow of the list, as appears below. If I clicked on the white space in order to show the list, the button will be triggered automatically. Any solution to this?

---

Sample HTML Code:

<select id="selectstate" name="state">

<option value="Alabama">Alabama</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>

</select>

<input type="submit" value="Update" name="update" />

Answer 1

I think you can simply submit your form.

var yourForm = document.forms["update"];  // your form name is "update"
yourForm.submit();

If you really want to click while changing the select box then create a click event and trigger it.

var selectBox = document.getElementById("yourSelect");
selectBox.onchange = function()
{
  // call the fireClick function passing the element
  fireClick(link); // pass the element in which you want to trigger
}


function fireClick(element)
{
  var ev = document.createEvent("MouseEvents");
  ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  element.dispatchEvent(ev);
}

even more simple way

selectBox.onchange = function()
{
  var submitButton = document.getElementById("button");
  submitButton.click();
}