Adding an onchange event to a custom dropdown menu in Wordpress

Question

I would like to add an onchange event to a dropdown menu I've created via my Wordpress plugin. As this is my first foray into Wordpress development, and the company I work for has a tall order for what they'd like, I'm struggling to understand how to do this.

This is what I have: I have a plugin that embeds a base URL into a Wordpress site via a short code. The plugin has an admin settings page that allows the user to change the base URL. In my plugin's php file, I have a function that returns a dropdown menu and embeds the base URL:

function embed_url() {
$dropdown_menu = '<select><option>OptionDefault</option><option value="?id=1">Option1<option value="?id=2">Option2</option></select>';
$full_url = '<object type="text/html" data=' . $embed_this_url . ' style="width:100%; height:100%"><p> URL could not be loaded. </p> </object>';
return $dropdown_menu . $full_url;
}

The variable $embed_this_url is the value of an option saved in the WP database. For example, the value could be "http://www.mysite.com".

What I want: I want my dropdown menu to change the website that's embedded. Using the code above, if the user selects Option 1, the embedded site would be $embed_this_url + '?id=1' (in other words: http://www.mysite.com?id=1). Therefore, I need to add some javascript to do an onchange function to refresh the with $embed_this_url plus the value of the selected.

How would I implement this?

Answer 1

I have added a wrapper to your html output and then written a jQuery code that you can use -

function embed_url() {
$dropdown_menu = '<select><option>OptionDefault</option><option value="?id=1">Option1<option value="?id=2">Option2</option></select>';
$full_url = '<object type="text/html" data=' . $embed_this_url . ' style="width:100%; height:100%"><p> URL could not be loaded. </p> </object>';

return '<div class="site-url">' . $dropdown_menu . $full_url . '</div>';

}

jQuery code -

jQuery(document).ready(function($){
$('.site-url select').on('change', function(){
var param = $(this).val();
var url = $('.site-url object').attr('data');
url += param;
$('.site-url object').attr('data', url);
}); 
});