Question

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

<script>

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

</script>

我已经尝试过这个document.getElementById("demo").innerHTML = selectVal;，它将所选项目输出到demo div，所以我知道它有效，但我怎样才能将结果输出/回显到链接中（例如：{{ 1}}），或者这甚至可能吗？

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

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

2 个答案: