如何将链接（href）绑定到任何下拉选项？

Question

我有一个下拉菜单，我根据我的Ajax调用自动填充。

在Ajax之前

Ajax之后

他们看起来像在DOM

HTML

<select class="rn-dropdown" id="rn-dd" href="http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?assessmentId=206a9246-ce83-412b-b8ad-6b3e28be44e3&amp;classroomId=722bfadb-9774-4d59-9a47-89ac9a7a8f9a">
    <option value="class-view">class view</option>
    <option value="s-00586">Student S00586</option>
    <option value="s-00587">Student S00587</option>
    <option value="s-00588">Student S00588</option>
    <option value="s-00589">Student S00589</option>
    <option value="s-00590">Student S00590</option>
</select>

_

我的目标是将每个学生重新指向一些href（www.site.com）。 我不是那样做的。

这就是我的

的jQuery

// Auto Populate the dropdown-menu
$("#rn-dd.rn-dropdown").append('<option value="' + userId + '"> <a href="">' + name + '</a></option>');

// Dropdown-menu change
$('#rn-dd').on('change', function() {
    $(this).find("a").attr('href', "www.google.com");
});

任何帮助/提示都对我意义重大。

Answer 1

使用自定义data-*属性为href事件设置基础change - 然后使用location.href实际进行更改：

<select class="rn-dropdown" id="rn-dd" data-href="http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?assessmentId=206a9246-ce83-412b-b8ad-6b3e28be44e3&amp;classroomId=722bfadb-9774-4d59-9a47-89ac9a7a8f9a">

和JS：

$('#rn-dd').on('change', function() {
    var selectedValue = this.value;
    var baseHref = $(this).data("href");

    //Do some logic on the href to get what you want
    //Not sure what that is based on the question
    var href = baseHref; //magic

    //Redirect
    location.href = href;
});

Answer 2

您不需要SELECT元素中的href属性，实际上它不是SELECT的标准属性。使用.val（）获取所选SELECT选项的值，而不是将其附加到给定的URL。使用history.location重定向到给定的URL。

 $('#rn-dd').change(function() {
     var i = $(this).val();
     var href = "http://localhost/?student=" + i;
     window.location = href;
 });