I'm trying to create an easyButton instance that changes the value of a dropdown list to a specific option. The method I am using to change the option value works outside of the easyButton instance elsewhere in the code. The easyButton also prints out the expected values to the console and otherwise works fine. If used to call another function, that function executes, but still does not change the dropdown list value. I'm really unsure why this is occuring and how to fix. Simplified code snippets are is as follows:
HTML; Dropdown list
<select id="select">
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
</select>
JS Script; Leaflet easyButton.
L.easyButton('<img src="./images/HomeIcon.png">', function(btn, map){
$("#select option[id=3]").attr('selected', 'selected');
}).addTo(mymap);
The main thing to stress is that the selector, $("#select option[id=5]").attr('selected', 'selected');, works, until I put it inside the Leaflet easyButton.
The assist would be greatly appreciated, especially if I am able to understand what I am doing wrong and what I should be doing in future.
Change the id to value:
<select id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
And then call:
L.easyButton('<img src="./images/HomeIcon.png">', function(btn, map){
$("#select").val(3)
}).addTo(map);
I'm just trying something out, as this is clearly the fix but I can't put it directly in due to a few complications. I'll report back, I just wanted to let you know I didn't go AWOL.
Thank you. I'm not sure why the original solution stopped working after a manual change of the drop down list, but this solution works perfectly.