Simulate human selection of option item in select menu

Question

I have a bit of script which technically works. It essentially listens to the hashtag on the URL and updates the select menu with the option value which matches the hashtag. It works on page load and doesn't care how the hashtag is updated, only that it is. Perfect

The problem is, I have a lot of other scripts on that page which does something when you select an option item, they all work when you manually select an option item, but nothing is triggered when I use the below script to automatically select the option item. How can I actually simulate a human selection in this setting? Any ideas?

$( document ).ready(function() {
 window.addEventListener('hashchange', fn, false);
 window.onload = fn; // fire on pageload
 function fn() {
    document.getElementById('select-two').value =
    window.location.hash.replace('#','');
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-two" name="colordrop" class="color2" onchange="letsDoThis()">
  <option value="Jet" class="jet">Jet</option>
  <option value="Cream" class="cream">Cream</option>
  <option value="Chocolate" class="chocolate">Chocolate</option>
  <option value="Classic Red" class="classic_red">Classic Red</option>
</select>

And here is my JSFiddle, though not sure how to demonstrate hashtags in JSFiddle. https://jsfiddle.net/liquilife/n9r6af7e/1/

This has been resolved. And I've marked the answer as complete. The final code which works is below:

$( document ).ready(function() {  
 window.addEventListener('hashchange', fn, false);
 window.onload = fn; // fire on pageload
 function fn() {
    $("#select-two").val(window.location.hash.replace('#','')).trigger("change");
 }
});

What do you mean with "simulating human selection"? because in order to change the value you simply can use the following and it should work (tested on your jsfiddle): `$( document ).ready(function() { document.getElementById('select-two').value = 'Blush'; });` — quirimmo, Sep 19 '17 at 23:10
I have other scripts on the page which run functions when a selection is manually made from that select drop down. However the auto selection based on the hashtag are not detected and any functions tied in with the selection change are not fired. — Robert E, Sep 19 '17 at 23:14
Possible duplicate of [Why does the jquery change event not trigger when I set the value of a select using val()?](https://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us) — showdev, Sep 19 '17 at 23:26

score 2 · Accepted Answer · answered Sep 19 '17 at 23:16

2

Since you're using jQuery you can use the .trigger(eventName) method to start a specific event on an element.

For instance you can both set the value and cause the event to fire like so:

$("#select-two").val(window.location.hash.replace('#','')).trigger("change");

answered Sep 19 '17 at 23:16

musicinmyhead

1,466
9
11

Thank you! This worked like a charm. And I learned something, which is awesome. i've updated my post with the snippet of JS which works just fine now. – Robert E Sep 19 '17 at 23:26

Azanyr · Answer 2 · 2017-09-19T23:43:11.163

1

You can use jQuery's change function to detect when the selected value of your select element changes and to execute code when that happens.

https://api.jquery.com/change

edited Sep 19 '17 at 23:43

answered Sep 19 '17 at 23:12

Azanyr

197
1
9

2

A little example based on the OP's code would be helpful. – showdev Sep 19 '17 at 23:15

Simulate human selection of option item in select menu

2 Answers2