Question

我有一个供用户选择的选项列表：

<select>
<option>Twitter</option>
<option>Google</option>
</select>

用户选择了一个选项并按下页面上的特殊按钮后，我需要将整个<select>列表转换为链接。例如，如果用户选择“Google”，则整个<select>列表将替换为：

<a href="google.com">Google</a>

如果选择了“Twitter”，则为：

<a href="twitter.com">Twitter</a>

Answer 1

我们检查按钮是否被点击
我们抓住所选值
我们用形成的链接替换select（使用抓取的值）

如果您想为所选选项使用自定义网址，只需为此选项添加自定义值，如下所示：

<option value="yahoo.com">This is yahoo</option>

＆＃13;

$(document).ready(function () {

    $("button").click(function () {
        var which = $("select").val();
        var text = $('select option:selected').html();
        $("select").replaceWith("<a href='http://" + which + "'>" + text + "</a>");

    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option value="twitter.com">This is twitter</option>
    <option value="google.com">This is google</option>
</select>
<button>Special button</button>

＆＃13;

Answer 2

可能的解决方案是：

$('button').click(function(){
    var select = $('select');
    var value = select.val();
    select.replaceWith('<a href="'+ value.toLowerCase() +'.com">'+ value +'</a>');
});

查看demo here。

修改

您可以在元素上设置data-something属性，例如：

<option data-something="apple">Smartphones</option>

然后在jQuery代码中：

$('button').click(function(){ var select = $('select'); var value = select.val(); var href = select.find(':selected').data('something') || value.toLowerCase(); select.replaceWith('<a href="'+ href +'.com">'+ value +'</a>'); });

DEMO

jQuery - 将选定的<option>转换为特定链接

2 个答案: