javascript - 如何从选择框中获取选定的值，并在 HTML 链接中使用它？

Question

所以，我在 HTML 中有一个选择框。我想要做的是获取所选项目的值，并将其放入 HTML 链接中。到目前为止，这是我的代码：

<script>

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

</script> 

我试过这个document.getElementById("demo").innerHTML = selectVal;，它将所选项目输出到演示 div，所以我知道它可以工作，但是我如何能够将结果输出/回显到链接中（例如：）<a href="output it here">mylink</a>，或者这甚至可能吗？

Answer 1

试试这个：

<script>

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

</script>

或者

<script>

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

</script> 

如果要创建链接，请尝试以下操作：

<script>

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

</script>

或者

<script>

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

</script>

如果要操作现有链接，请尝试以下操作：

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

注意：如评论中所述，将选择器中的a和保留div在 前面#，因为它们是多余的。我将它们包括在内只是为了让您可以看到它们是<a>和<div>元素。

Answer 2

的select值将始终与所选选项相同，因此您可以使用它并将其作为锚点 href 直接插入：

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