How do I append new anchor to options in drop down using jQuery

Question

Is it possible to create a new anchor tag dynamically along with option in drop down list?

I want to open new page in new tab from drop down list box. Is there is any other way to do this?

So far, I have tried this:

function abc
{
    $("#reportimg").fadeOut("slow"); 
    <?php $link="<html><a Onclick='openreport($report2)'>Open</a></html>";?>
    var text="<?php echo $report2.$link;?>";  
    var val="<?php echo $report2;?>"; 
    alert(text);
    $('#report_list').append( new Option(text,val) );
}

You can not have a link inside of a select element. And what is with the `` tags? — epascarello, Apr 24 '13 at 13:09
do you mean to have php tags in your javascript? They're evaluated server side (if at all) and won't be present on the client side where the javascript is processed. — Matt Ellen, Apr 24 '13 at 13:10
why you don't associate data attribute with the destination url to each option and then use change event from jQuery and when a user choose an option it will redirect user to a new tab. — tbem, Apr 24 '13 at 13:28

Ian · Answer 1 · 2013-04-24T15:13:33.173

2

Try using this structure (of course you can replace my stuff with your PHP generation, but there's no need to use <a> or whatever):

<select id="report_list">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

And this Javascript:

$(document).ready(function () {
    $("#report_list").on("change", function () {
        openreport($(this).val());
    });
});

DEMO: http://jsfiddle.net/AyvUZ/2/

This listens for the <select>'s value to change, meaning an option was chosen. You can grab its value with $(this).val() (which is all you seemed to need in your example code), and pass that to openreport. This is all done without modifying the original HTML.

edited Apr 24 '13 at 15:13

answered Apr 24 '13 at 13:34

Ian

50,146
13
101
111

he has jQuery - what's with `window.onload` and `document... .onchange`? – Alnitak Apr 24 '13 at 13:39
@Alnitak What's wrong with a vanilla JS solution? I'm not gonna lie, I completely forgot they were using jQuery. It doesn't mean it **has** to be used. But obviously it's preferred, so I'll update my answer – Ian Apr 24 '13 at 13:40
mostly better, but FWIW `$(this).val()` is one of those things that is actually better written with vanilla JS - i.e. `this.value` – Alnitak Apr 24 '13 at 13:42
@Alnitak Yeah I don't think so. That's very contradictive of you. If you want jQuery to be used, use it. I haven't encountered a situation where `.val()` does something better (although `.val("value")` is a different story), but I'd rather stick with jQuery methods that take care of things we might not think of. I'm sure there's a reason why the `.val()` method in the jQuery source takes several lines of code – Ian Apr 24 '13 at 13:45
It's not just me saying that. Remy Sharp and Adam Sontag both said the same at jQuery UK last week. – Alnitak Apr 24 '13 at 13:53
1

@Alnitak Hmm well that's interesting. To me, it's more conceivable inside of a handler, because you know `$(this)` will be something. Using `.val()` is nice when the selector may not return anything, and therefore the method will return `""` instead of failing with something like `document.getElementById("whatever").value` (which of course you should check for existence first). Also, I just saw http://stackoverflow.com/questions/7322078/jqueryid-val-vs-getelementbyidid-value#comment-8835318 so that can be good or bad – Ian Apr 24 '13 at 14:33

score 2 · Answer 2 · answered Apr 24 '13 at 13:48

You can not actually force a browser to open a new tab, only a new window. Nowadays browsers do tend to open a new tab when you click on a "_blank" link or open a new window through JavaScript.

If you're OK with that (and I suspect, you're not since you asked specifically for a solution that opens a new tab), you can try this:

<!doctype html>
<html>
<body>
    <select id="myDropDown">
        <option>Select a website</option>
        <option value="http://www.google.com">Google</option>
        <option value="http://www.yahoo.com">Yahoo</option>
        <option value="http://www.msn.com">MSN</option>
    </select>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#myDropDown').change(function(el) {
                window.open($('#myDropDown').val());
            });
        })
    </script>
</body>
</html>

Hope that helps!

How do I append new anchor to options in drop down using jQuery

2 Answers2