How do I solve this code when user select the second dropdown(select_2) box it will go to a hyperlink or new website

Question

I have two dropdowns. If an option is selected in dropdown 1 then the second option will appear in dropdown 2. When the option in dropdown 2 it is selected, I wanted to redirect it to open another link or website

Here is a codepen that I started, but I am not sure where to go from here:

<div class="main-block">
  <h3>Select By Company</h3>
  <form action="#" method="post">
    <hr>
<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Company </option>
  <option value="AHMAD ZAKI RESOURCES BERHAD"> AHMAD ZAKI RESOURCES BERHAD </option>
  <option value="AHMAD ZAKI SDN BHD"> AHMAD ZAKI SDN BHD </option>
  <option value="KEMAMAN TECHNOLOGY & INDUSTRIAL PARK SDN. BHD."> KEMAMAN TECHNOLOGY AND INDUSTRIAL PARK SDN. BHD. </option>
</select>


<select class="size" id="select_2" name="size">
  <option selected="selected" value=""> Choose Department </option>
</select>
<script type="text/javascript">

let azrb = '<option selected="selected" value=""> Choose Department </option><option value="ADMINISTRATION">ADMINISTRATION</option><option value="https://www.youtube.com/watch?v=Ry6G-ZzEUbA">AZ LAND & PROPERTIES SDN BHD</option><option value="https://www.youtube.com/watch?v=Ry6G-ZzEUbA">AZSB MACHINERIES SDN BHD</option>';
var azsb = '<option selected="selected" value=""> Choose Size </option><option value="30">30</option><option value="29">29</option><option value="28">28</option>';
var kemaman = '<option selected="selected" value=""> Choose Size </option><option value="12">12</option><option value="11">11</option><option value="10">10</option>';
$(document).ready(function() {
  $("select#select_1").on('change', function() {
    if ($(this).val() == "AHMAD ZAKI RESOURCES BERHAD") {
      $("select#select_2").html(azrb);
      window.open.href = value;
    } else if ($(this).val() == "AHMAD ZAKI SDN BHD") {
      $("select#select_2").html(azsb);
    } else if ($(this).val() == "KEMAMAN TECHNOLOGY & INDUSTRIAL PARK SDN. BHD.") {
      $("select#select_2").html(kemaman);
    }
  });
});
</script>

type here

score 1 · Answer 1 · answered Feb 09 '23 at 09:52

check if the selected value is a valid url or not (for more info regarding the same checkout the link ) from #select_2 redirect :

$(document).on('change','#select_2',function(){
     
    let selectedValue = $(this).val();
    let URL           = null
    try {
       url = new URL(selectedValue);
    } catch (_) {
      /**
       * Catch 
       */
    }
    if((URL.length > 0) && (url.protocol === "http:" || url.protocol === "https:")){
      /**
       * You can redirect using window.location.href or window.location.replace
       * If you want to simulate someone clicking on a link, use location.href
       * If you want to simulate an HTTP redirect, use location.replace
       */
      window.location.href = URL;
    }else{
      /**
        * Something to do 
        * if the selected value is not an valid url
        */
    }

 
});

If you want to know more about the redirection checkout this link

How do I solve this code when user select the second dropdown(select_2) box it will go to a hyperlink or new website

1 Answers1