我有一个代码，允许用户从选择下拉列表中选择选项。但是因为它使用选项的“值”来生成新列表（更准确地说是将选择列表链接在一起），这意味着我不能使用它来传递URL到我的gotoNewPage函数。有什么方法可以绕过它吗？

<script> 
        function goToNewPage()
      {
        var url = document.getElementById('niv2').value;
        console.log(url);
        if(document.getElementById('niv2').value!='nothing'){
           window.open(url,'_blank');
        }
      }
      </script>

                             <form id="formname" name="State-Category-Organiser"> 
                                            <P style="font:Verdana, Geneva, sans-serif; font-size:12px; font-style: normal">State</p>
                                            <select data-child="niv1" class="selectdata form-control custom-select">
                                                <option value="1-1">QLD</option>
                                                <option value="1-2">NSW</option>
                                            </select>
                                        </div>
                                        <div >
                                            <P style="font:Verdana, Geneva, sans-serif; font-size:12px; font-style: normal">Sports</p>
                                            <select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
                                                <option data-group="1-1" value="1-1-1">Brisbane</option>
                                                <option data-group="1-2" value="1-2-1">Sydney</option>
                                            </select>
                                        </div>
                                        <div >
                                            <P style="font:Verdana, Geneva, sans-serif; font-size:12px; font-style: normal">Organiser</p>
                                            <select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
                                                <option data-group="1-1-1" value="1-1-1-1">Tommy</option>
                                                <option data-group="1-1-1" value="1-1-1-1">Franks</option>
                                                <option data-group="1-1-1" value="1-1-1-1">Jacky</option>
                                                <option data-group="1-1-1" value="1-1-1-1">Simon</option>

                                        </div>
                                        <div >
                                        <input type=button value="Go" onclick="goToNewPage()" /> </form>
                                        </div>
                                        
                                                <script type="text/javascript">
                                    $("[data-child]").change(function() {
                                      const selectedGroup = $(this).val();
                                      var $childSelect = $("#" + $(this).attr("data-child"));
                                      value = $childSelect.find('option').hide()
                                      .filter(function (i, e) {
                                        return $(e).val().startsWith(selectedGroup)
                                      }).show().eq(0).val();
                                      $childSelect.val(value);
                                      $childSelect.trigger('change');
                                    });
                                    $("[data-child]").eq(0).trigger('change');
                            </script>