获取多选列表值并使用JavaScript / jquery重写为锚点

Grab multi select list values and rewrite as anchors with JavaScript/jquery

本文关键字：jquery 重写 JavaScript 列表 获取      更新时间：2023-09-26

大家好，感谢您的查看。我在从数据库预填充的页面上有一个多选列表。

我现在需要从列表中获取所有数据并将其转换为单独的链接 从理论上讲，下拉列表可以是任何长度，并且列表值用作记录 ID，因此......

<select id="Inf1">
        <option value="147">Art Tatum</option>
        <option value="151">Charles Mingus</option>
        <option value="172">John Coltrane</option>
    </select>

应重写为：

<div id="Artists">
<a href="/tabid/89/xmmid/393/xmid/147/xmview/3/default.aspx">Art Tatum</a>
<a href="/tabid/89/xmmid/393/xmid/151/xmview/3/default.aspx">Charles Mingus</a>
<a href="/tabid/89/xmmid/393/xmid/172/xmview/3/default.aspx">John Coltrane</a>
</div>

谢谢。

$("#Inf1 option").each(function () {
        var id, text;
        id = $(this).val();
        text = $(this).text();
        $("#Artists").append("<a href='/tabid/89/xmmid/393/xmid/"+id+"/xmview/3/default.aspx'>"+text+"</a>");
    });

像这样的东西应该可以工作，这里也是一个jsfiddle，尽管我强烈建议您在服务器上创建链接。

http://jsfiddle.net/nQsTF/

这是一个 jQuery 解决方案

$(function() {
    var options = $('#Inf1')[0].options;
    var div =  $('<div id="Artists">');
    for (var i=0; i < options.length; i++) {
        div.append($('<a href="/tabid/89/xmmid/393/xmid/'+options[i].value+'/xmview/3/default.aspx">' + options[i].text+ '</a>'));
    }
    div.appendTo('body');
});

这里有一个用于演示 http://jsfiddle.net/7GhXE/1/的 jsFiddle

为什么要在

服务器上创建一个下拉列表，然后用完客户端资源将其转换为超链接？

只需首先在服务器上生成超链接即可。

此代码将在名为"result"的变量中返回您想要的div，无论列表的长度如何。它是跨浏览器的，你不需要任何库。

var result = (function (){
    var rv = document.createElement("div");
    var dropdown = document.getElementById("Inf1");
    var options = dropdown.options;
    for(var i=0;i<options.length;i++){
        var option = options[i];
        var a = document.createElement("a");
        a.href = "/tabid/89/xmmid/393/xmid/" + option.value + "/xmview/3/default.aspx";
        a.innerHTML = option.text;
        rv.appendChild(a);
        }
    rv.id = "Artists";
    return rv;
    })();

现在你只需要在页面中嵌入你想要的输出div，例如使用document.body.appendChild（result）。

相关文章：