CODEWITHSUNDEEP
javascriptjqueryhtml
Willb
Willb

Reputation: 185

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

Hi everyone and thanks for looking. I have a multiselect list on a page that's been pre-populated from a database.

I now need to grab all data from the list and turn it into separate links The drop-down could in theory be of any length and the list value is used as the record ID, so...

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

should be re-written as:

<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>

Thanks.

Upvotes: 0

Views: 325

Answers (4)

Luc125
Luc125

Reputation: 5857

this code will return the div you want in the variable named "result", whatever the length of your list. It's cross-browser and you don't need any library.

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;
    })();

// Now you just have to embed the output div where you want in your page, using document.body.appendChild(result), for instance.

Upvotes: 0

Stefan Konno
Stefan Konno

Reputation: 1337

$("#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>");
    });

Something like this should work, here's a jsfiddle as well, even though I strongly suggest you create the links on the server instead.

http://jsfiddle.net/nQsTF/

Upvotes: 2

DanielB
DanielB

Reputation: 20230

Here is a jQuery solution

$(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');

});

and here a jsFiddle for demonstration http://jsfiddle.net/7GhXE/1/

Upvotes: 1

JK.
JK.

Reputation: 21834

Why go to the effort of creating a dropdown list on the server and then using up the clients resources to convert it to hyperlinks?

Just generate the hyperlinks on the server in the first place.

Upvotes: 0

Related Questions