0

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?

1 Answer 1

0

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);
}); 
});
1
  • Thank you so much, WisdmLabs! This will make work tomorrow a good day!
    – L. Becker
    Jul 30, 2014 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.