当从下拉菜单中选择某个选项时，如何触发某些东西？

Question

我有一个下拉菜单。

关于更改，我想重定向到某个 url。

我不确定该怎么做。

我已经尝试检查值是否 == class-view

if( $('#dd').val() === "class-view" ){

    location.href = "www.site.com";
}

现在，它不断循环刷新我的页面。

Answer 1

您的页面正在循环，因为每次您加载该页面时，selected 值为 "class-view"，因为它是 select 列表中的第一个选项。尝试使用 jquery.

做这样的事情

$(document).ready(function(){
    $("#rn-dd").change(function(){
       var selectedVal = $(this).val(); // Value of the selected option
       // Redirect to your page accordingly
    });
});

您可以向每个选项添加一个 data-href 属性，这样您就可以在更改 happened.So 时重定向到该位置，您的 html 应该如下所示

<select class="rn-dropdown" id="rn-dd">
    <option value="class-view" data-href="a.html">class view</option>
    <!-- Students Populate Here  -->
    <option id="s-00586" data-href="b.html" value="s-00586">Student S00586</option>
    <option id="s-00587" data-href="c.html" value="s-00587">Student S00587</option>
    <option id="s-00588" data-href="d.html" value="s-00588">Student S00588</option>
    <option id="s-00589" data-href="e.html" value="s-00589">Student S00589</option>
    <option id="s-00590" data-href="f.html" value="s-00590">Student S00590</option>
</select>

现在您可以获取 selected 选项的 href 数据属性值。所以完整的解决方案是这样的，

$(document).ready(function(){
    $("#rn-dd").change(function(){
       document.location.href = $(this).find(":selected").data("href");
    });
});

您可以从此处找到有关数据属性的更多信息Jquery Data attribute

Answer 2

在 onchange 事件中 testMessage 函数将被调用，将您的逻辑放在该函数中。

<script type="text/javascript">
    $("#rn-dd").change(function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        alert("Selected Text: " + selectedText + " Value: " + selectedValue);
        if(selectedText == "" && selectedValue == "") { // placed your here for different action on different selected options.
            // do something
        }
    });
</script>

已编辑：

您应该阅读这篇文章 JQuery - OnChange Event。会有帮助。

当从下拉菜单中选择某个选项时，如何触发某些东西？

How can I trigger something when a certain option is selected from the dropdown-menu?

html

javascript

jquery

drop-down-menu