change page HTML after change dropdown-CodePudding

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" >
              <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.

CodePudding user response：

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");

CodePudding user response：

Whenever the change handler is called, it gets passed an event with relevant information about the event itself. It includes a event.target.value property which you can use to get the option that was clicked. You can just add '.html' to the value and set the src of your iframe accordingly.

 <script>

  $(document).on("change", ".fx", function (event) {
    document.getElementById("content").src = event.target.value   ".html";
    document.getElementById("content").style.display = "block";
  });

</script>