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

大家好，谢谢你们的关注。我有一个从数据库预先填充的页面上的多选列表

我现在需要从列表中获取所有数据，并将其转换为单独的链接。理论上，下拉列表可以是任意长度的，列表值用作记录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>

---

谢谢。

为什么要在服务器上创建下拉列表，然后使用客户端资源将其转换为超链接

---

首先在服务器上生成超链接。

为什么要在服务器上创建下拉列表，然后使用客户端资源将其转换为超链接

---

首先在服务器上生成超链接。

这里是一个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');

});

---

这里是一个用于演示的JSFIDLE

这里是一个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');

});

这里是一个用于演示的JSFIDLE

类似的东西应该可以工作，这里还有一个JSFIDLE，尽管我强烈建议您在服务器上创建链接

类似的东西应该可以工作，这里还有一个JSFIDLE，尽管我强烈建议您在服务器上创建链接

---

这段代码将返回名为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;
    })();

---

//现在，您只需使用document.body.appendChildresult将输出div嵌入页面中所需的位置。

此代码将在名为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;
    })();

---

//现在，您只需使用document.body.appendChildresult将输出div嵌入页面中所需的位置。

最后$'Einf1'。remove将完成他的要求：@大家都很正确地说，这应该在服务器上形成。我正在与DotNetNuke上的表单管理器合作，它将所有记录作为一大块XML写出。我曾经尝试过使用SQL来定位它，但失败了，因此我这样做了。谢谢您的建议。最后，$'Einf1'。remove将完成他的要求：@大家都很正确地说，这应该在服务器上形成。我正在与DotNetNuke上的表单管理器合作，它将所有记录作为一大块XML写出。我曾经尝试过使用SQL来定位它，但失败了，因此我这样做了。谢谢你的建议。谢谢你的建议。您的解决方案运行良好，但我已将Stefan的答案标记为正确，因为它的代码稍微精简了一些。很抱歉谢谢你。您的解决方案运行良好，但我已将Stefan的答案标记为正确，因为它的代码稍微精简了一些。很抱歉