Change the query string of an iframe src when select options are clicked

Question 1

You can achieve this by pure JavaScript. Just add id to your <select> elements.

<select name="status" id="status">

and

<select name="plan" id="plan">

And add the JavaScript at the end of HTML <body>.

<script type="text/javascript">
function set_url(){
    status = document.getElementById("status").value;
    plan = document.getElementById("plan").value;
    s = url + status + plan;
    //alert(s); 
    document.getElementById("Iframe2").src = s;
}
url = "http://www.google.com/search?q=JavaScript";
document.getElementById("status").onchange = set_url;
document.getElementById("plan").onchange = set_url; 
</script>

NOTE: The base URL should be stored in a variable; like url in above example.

Question 2

capture combo's change event, then you change link href depending on the selected value. The first time, you save the base_href, to avoid to compute it each time. Everytime you save the changed values to a var and add the two variables to the url.

var base_href="",status="",plan="";
$('#plan').on('change', function() {
   plan=$(this).val();
    if (base_href=="")
        base_href = $("#Iframe2").attr("src");
   $("#Iframe2").attr("src",base_href+plan+status);
 });
$('#status').on('change', function() {
   status=$(this).val();
    if (base_href=="")
        base_href = $("#Iframe2").attr("src");
   $("#Iframe2").attr("src",base_href+plan+status);
 });

I am doing it with jquery(im writing with my mobile and it less code to write) but if you dont want to use jquery the only thin that changes is the name of the functions. The idea is the same!