Skip to content
Advertisement

change page HTML after change dropdown

I have 2 pages and the main page. the total 3 pages. I want to access the first and second pages after changing the dropdown list. I try this code by Jquery in my HTML called main.html.

    <html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-git1.min.js"></script>
     <script>
      $(document).on('change','.fx',function(){
        document.getElementById('content').src = "firstpage.html";
        document.getElementById('content').style.display = "block";
       });
</script>
<style>
  iframe{
    height:700px;
    width:700px;
    display:none;
  }
</style> 
  </head>
  <body>
   <select name="fx" class="fx">
              <option value="empty"></option>
              <option value="firstPage">1</option>
              <option value="secondPage">2</option>
</select>
<iframe src="firstpage.html" id="content" >

</iframe>
  </body>
</html>

I want to use the if statement.

If select 1 load firstPage.html

If select 2 load secondtPage.html

Any Edition of this code.

Advertisement

Answer

Please note that values and file names are case sensitive, so ‘firstpage’ and ‘firstPage’ are not the same!

Try this jQuery code:

$(document).on ("change", "select.fx[name='fx']", function () {
   var $select = $(this);
   if ($select.val () == "firstPage") {
      $("#content").attr ("src", "firstpage.html");
      $("#content").show ();
   }
   else if ($select.val () == "secondPage") {
      $("#content").attr ("src", "secondpage.html");
      $("#content").show ();
   }
   else {
      $("#content").hide ();
      alert ("Page not found!");
   }
});

Don’t do things like this as it may be unsafe:

$("#content").attr ("src", $(this).val() + ".html");
7 People found this is helpful
Advertisement