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

Question

I have a dropdown menu.

On change, I want to redirect to a certain url.

I'm not sure how will I do that.

I've tried check to see if the value == class-view

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

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

Now, it keep looping and refreshing my page.

You are looking for `change` event... Now can i ask you how many puppet accounts do you have on SO? http://stackoverflow.com/questions/31525520/how-can-i-redirect-to-specific-url-on-select-change#comment51012421_31525520 — A. Wolff, Jul 21 '15 at 12:45

A.M.N.Bandara · Accepted Answer · 2015-07-21T13:02:41.397

Your page is looping because evertime you load the page, selected value is "class-view" since it is the first option in the select list. Try doing something like this using jquery.

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

You can add a data-href attribute to each option so you can redirect to that location when the change has happened.So your html should look like this

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

Now you can get the href data attribute value for the selected option. So the complete solution would be like this,

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

You can find more about data attribute from here Jquery Data attribute

How can apply the specific action to each option ? Will I still use the same code ? Thanks for you help. :) — Tiffany Soun, Jul 21 '15 at 12:53
In your answer, id doesn't explain what are "href" and "s5" variables are. So it's not easy to say whether it is correct or not. But, there maybe a quick solution for what you are lookking for. I've edited my answer, check it out! — A.M.N.Bandara, Jul 21 '15 at 13:02
Thank you very much for the update. This will help me a lot. — Tiffany Soun, Jul 21 '15 at 13:04

SK. · Answer 2 · 2015-07-21T12:57:51.947

0

On onchange event testMessage function will get call, place your logical inside this function.

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

Edited:

You should read this JQuery - OnChange Event. Will be helpful.

edited Jul 21 '15 at 12:57

answered Jul 21 '15 at 12:49

SK.

4,174
4
30
48

How can apply the specific action to each option ? Will I still use the same code ? Thanks for you help. :) – Tiffany Soun Jul 21 '15 at 12:53

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

2 Answers2