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>元素。