如何从选择框中获取选定的值，并将其用于HTML链接？

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?

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

Answer 2

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