如何实现二级下拉框选中选项后跳转至指定链接的功能？

我有两个联动的下拉框，选中第一个下拉框（select_1）的选项后，第二个下拉框（select_2）会加载对应的选项。现在需要实现：选中第二个下拉框的选项时，自动跳转到指定的链接或网站。以下是我已完成的代码，但不清楚后续如何修改：

<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> 
</form>
</div>

修改后的完整代码 #

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

  // 第二个下拉框选中跳转逻辑
  $("select#select_2").on('change', function() {
    const selectedValue = $(this).val();
    // 判断是否为有效链接（简单匹配http开头）
    if (selectedValue && selectedValue.startsWith('http')) {
      // 当前窗口跳转
      window.location.href = selectedValue;
      // 如需新窗口打开，替换为：window.open(selectedValue, '_blank');
    }
  });
});
</script> 
</form>
</div>

关键修改说明 #

• 移除了第一个下拉框事件中无效的window.open.href = value;代码
• 为第二个下拉框添加change事件监听，捕获选中值
• 增加链接有效性判断，避免空值或非链接选项触发跳转
• 提供两种跳转方式：当前窗口跳转、新窗口打开，可按需切换

内容的提问来源于stack exchange，提问作者Toro Inoue