带有链接的选定选项 - HTML

HTML中提供了丰富的标签和属性，可以实现各种表单控件的效果。其中，带有链接的选定选项是一个非常实用的控件，可以让用户在填写表单时选择一个指定的链接，而不是手动输入链接地址。

使用<select>和<option>实现带有链接的选定选项

在HTML中，可以使用<select>和<option>标签来实现带有链接的选定选项。具体的实现步骤如下：

1. 创建一个<select>标签，并设置其name属性为表单提交时的键名，如下所示：

<select name="link">

2. 在<select>标签中创建多个<option>标签，每个标签代表一个选项。这里需要注意，每个<option>标签需要设置value属性，该属性的值将作为表单提交时的值，同时，还需要设置data-link属性，该属性的值为所对应链接的地址，如下所示：

<option value="1" data-link="https://www.google.com/">Google</option>
<option value="2" data-link="https://www.bing.com/">Bing</option>
<option value="3" data-link="https://www.baidu.com/">Baidu</option>

3. 当用户选择一个选项时，需要通过JavaScript获取该选项的data-link属性的值，并将其设置为window.location.href属性的值，以实现页面跳转，如下所示：

let select = document.querySelector('select[name="link"]');
select.addEventListener('change', function() {
    let option = this.options[this.selectedIndex];
    window.location.href = option.getAttribute('data-link');
});

完整的HTML代码

<form>
    <select name="link">
        <option value="1" data-link="https://www.google.com/">Google</option>
        <option value="2" data-link="https://www.bing.com/">Bing</option>
        <option value="3" data-link="https://www.baidu.com/">Baidu</option>
    </select>
</form>
<script>
    let select = document.querySelector('select[name="link"]');
    select.addEventListener('change', function() {
        let option = this.options[this.selectedIndex];
        window.location.href = option.getAttribute('data-link');
    });
</script>

以上是使用<select>和<option>标签实现带有链接的选定选项的完整HTML代码。需要注意的是，该实现方式需要使用JavaScript来处理选项的选中事件，以实现页面跳转。