联动下拉选择中option的value用于分组，无法传递URL至goToNewPage的解决方案咨询

以下几种方法都能解决你的问题，且不影响现有联动逻辑：

方法一：使用自定义data属性存储URL #

这是最直接的方案，利用HTML的自定义data-*属性存放URL，完全不干扰原有的分组value和联动逻辑。

修改步骤： #

1. 给目标下拉（niv2）的每个<option>添加data-url属性，填入对应URL：

<select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
    <option data-group="1-1-1" value="1-1-1-1" data-url="https://example.com/tommy">Tommy</option>
    <option data-group="1-1-1" value="1-1-1-2" data-url="https://example.com/franks">Franks</option>
    <option data-group="1-1-1" value="1-1-1-3" data-url="https://example.com/jacky">Jacky</option>
    <option data-group="1-1-1" value="1-1-1-4" data-url="https://example.com/simon">Simon</option>
</select>

注意：原代码中niv2的所有option value重复，建议改成唯一值，避免后续逻辑冲突

2. 修改goToNewPage函数，获取选中option的data-url值：

function goToNewPage() {
    const niv2Select = document.getElementById('niv2');
    const selectedOption = niv2Select.options[niv2Select.selectedIndex];
    const url = selectedOption.getAttribute('data-url');
    
    console.log(url);
    if (url && url !== 'nothing') {
        window.open(url, '_blank');
    }
}

方法二：将value设置为复合值（分组标识+URL） #

把value改成用分隔符（比如|）拼接的复合字符串，前半部分保留分组逻辑需要的标识，后半部分存URL。需要修改联动逻辑和跳转逻辑来拆分这个值。

修改步骤： #

1. 修改<option>的value为复合格式：

<select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
    <option data-group="1-1-1" value="1-1-1-1|https://example.com/tommy">Tommy</option>
    <option data-group="1-1-1" value="1-1-1-2|https://example.com/franks">Franks</option>
    <option data-group="1-1-1" value="1-1-1-3|https://example.com/jacky">Jacky</option>
    <option data-group="1-1-1" value="1-1-1-4|https://example.com/simon">Simon</option>
</select>

2. 修改联动逻辑，只取value的前半部分做分组判断：

$("[data-child]").change(function() {
    // 拆分选中值，只取分组标识部分
    const selectedGroup = $(this).val().split('|')[0];
    const $childSelect = $("#" + $(this).attr("data-child"));
    
    const value = $childSelect.find('option').hide()
        .filter(function (i, e) {
            // 拆分option的value，用分组标识判断匹配
            return $(e).val().split('|')[0].startsWith(selectedGroup);
        }).show().eq(0).val();
        
    $childSelect.val(value);
    $childSelect.trigger('change');
});

3. 修改goToNewPage函数，拆分value获取URL：

function goToNewPage() {
    const value = document.getElementById('niv2').value;
    const url = value.split('|')[1];
    
    console.log(url);
    if (url && url !== 'nothing') {
        window.open(url, '_blank');
    }
}

方法三：用JS对象映射分组值到URL #

在JavaScript中定义一个映射对象，把每个分组value对应到对应的URL，跳转时通过选中的value去查找URL。

修改步骤： #

1. 首先修正niv2的option value为唯一值：

<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-2">Franks</option>
    <option data-group="1-1-1" value="1-1-1-3">Jacky</option>
    <option data-group="1-1-1" value="1-1-1-4">Simon</option>
</select>

2. 在JS中定义映射对象，并修改goToNewPage函数：

// 定义分组值与URL的映射
const urlMap = {
    "1-1-1-1": "https://example.com/tommy",
    "1-1-1-2": "https://example.com/franks",
    "1-1-1-3": "https://example.com/jacky",
    "1-1-1-4": "https://example.com/simon"
};

function goToNewPage() {
    const value = document.getElementById('niv2').value;
    const url = urlMap[value];
    
    console.log(url);
    if (url && url !== 'nothing') {
        window.open(url, '_blank');
    }
}

三种方法里，方法一最推荐，逻辑清晰、对原有代码改动最小，也符合HTML规范。

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