How do I get the selected value from a select box, and use it in a HTML link?

Question

So, I have a select box in HTML. What I want to do is take the value of whatever item is selected, and put into a HTML link. Here's my code so far:

<script>

$('#cds').change(function() {
var selectVal = $('#cds :selected').val();
});

</script>

I've tried this document.getElementById("demo").innerHTML = selectVal;, which outputs the selected item to the demo div, so I know it works, but how would I be able to output/echo the result into a link (eg: <a href="output it here">mylink</a> ), or is this even possible?

Zachary Kniebel · Accepted Answer · 2013-04-13T21:09:31.853

1

Try this:

<script>

$('#cds').change(function() {
    var selectVal = $(this).val();
    $("a#linkToChange").attr("href", selectVal);
});

</script>

or

<script>

$('#cds').change(function() {
    $("a#linkToChange").attr("href", $(this).val(););
});

</script>

If you want to create the link, try this:

<script>

$('#cds').change(function() {
    var selectVal = $(this).val();
    $("div#demoDiv").append("<a href='" + selectVal + "'>Result Link</a>");
});

</script>

or

<script>

$('#cds').change(function() {
    $("div#demoDiv").append("<a href='" + $(this).val() + "'>Result Link</a>");
});

</script>

If you want to manipulate the existing link, try the following:

<script>

$('#cds').change(function() {
    var selectVal = $(this).val();
    var url = $("a#linkToChange").attr("href");
    url += "/" + selectVal + "/"; // you can replace the slashes with whatever you want to prepend/append to the selected value
    $("a#linkToChange").attr("href", url);
});

</script>

NOTE: As stated in the comments, leave the a and the div out of the selectors, in front of the #, as they are redundant. I included them only so that you could see that they are <a> and <div> elements.

edited Apr 13 '13 at 21:09

answered Apr 13 '13 at 20:31

Zachary Kniebel

4,686
3
29
53

Don't include the `a` in the selector! It's redundant/wasteful :) Although I'm sure you were just using it as an example to show that's where/how you need to get the anchor element – Ian Apr 13 '13 at 20:36
Also, no need to use `$("#cds").val()` since this event handler is for that element - use `$(this).val()` or `this.value` :) – Ian Apr 13 '13 at 20:37
@Ian - I only included the `a` so that he could see that it was an anchor - same thing with the `div`. :) – Zachary Kniebel Apr 13 '13 at 20:37
That's what I thought, I just wanted to make sure :) – Ian Apr 13 '13 at 20:38
No worries. Let me know if you have any more questions on this :) – Zachary Kniebel Apr 13 '13 at 20:56
Ohh, actually, sorry just one more thing. Sorry completely forgot, how could I output the result inside an existing link, if you know what I mean. (eg: link) – Apr 13 '13 at 21:00
The first two examples address that. Give the link an `id` and replace `a#linkToChange` with `#whateverIDYouGiveToTheLink`. – Zachary Kniebel Apr 13 '13 at 21:01
Sorry, don't think I explained that very well. What I'm trying to say is echo the selected result inside an existing href, so if I had link already with href="google.com", I want to be able to add into this, like href="google.com/^whateverIselected^". Is this possible? – Apr 13 '13 at 21:05
@ZacharyKniebel Sorry for the bother again (last time, I swear!) but how could I access the selected value from outside an iFrame? (eg, my select box is in the iFrame, and my link is outside it) Would it be something like this: $('#iframe.#cds').change(function() – Apr 14 '13 at 14:39
@ZacharyKniebel Really sorry for this, I've never really used Javascript before, and it seems to be the only way I can do this. I've tried this: `$('#iframe').contents().find('#cds').change(function() { var selectVal = $(this).val(); url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on'; $("twitter").attr("id", url); });` Which is what I got from that other post, but slightly tweaked, but it still doesn't work. Any advice? – Apr 14 '13 at 15:26
That won't work, because the source of the `iframe`, Twitter, is not on the same domain as your website. Re-read the post I linked to and look for the cross-domain restriction stuff. What are you trying to show from Twitter? – Zachary Kniebel Apr 14 '13 at 15:29
What do you mean on a different domain, as in a different website or a different directory? Because they're on the same domain, and in the same directory. – Apr 14 '13 at 15:30
A different website, yes. The `iframe` itself is in your code, but the source of the iframe, i.e. the webpage that you are displaying in the `iframe`, is located on a different website (yoursite.com v.s. twitter.com). Or did I misunderstand your example? – Zachary Kniebel Apr 14 '13 at 15:32
Yeah, the page displayed in the iframe, and the page with the iframe are both on my site. – Apr 14 '13 at 15:36
As the discussion on my post is starting to get a bit too long, you don't have enough reputation to chat, and this is really a different question than was in the OP, please make a new question for this and I will try to find it and help you :) – Zachary Kniebel Apr 14 '13 at 15:44
here it is http://stackoverflow.com/questions/16001030/how-do-i-get-the-selected-value-from-a-select-box-from-inside-an-iframe-and-di – Apr 14 '13 at 15:55
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/28196/discussion-between-looserlf-and-zachary-kniebel) – Apr 14 '13 at 16:22

score 1 · Answer 2 · answered Apr 13 '13 at 20:33

1

The select's value will always be the same as the selected option, so you can use that and insert it as an anchors href directly :

$('#cds').on('change', function() {
   $('#anchorID').attr('href', this.value);
});

answered Apr 13 '13 at 20:33

adeneo

312,895
29
395
388

But what if the ` – Ian Apr 13 '13 at 20:38
@Ian - oh crap, then we would probably need a `$.map` and a `filter()` and maybe an `each()` or a `$.grep`, but what to choose ? – adeneo Apr 13 '13 at 20:52

How do I get the selected value from a select box, and use it in a HTML link?

2 Answers2