On selecting option send down to the div id

im trying to achieve something, when user selection option from dropdown, selected option match with div id and it will scroll down to div id section. hope i made clear…

<select name="" id="course" class="form-control">
        <option value="">Select Your Course</option>
        <option value="nursing"><a href="#">Nursing</a></option>
       <option value="cookery"><a href="#">Cookery</a></option>
      <option value="information"><a href="#">Technology</a></option>
       <option value="social-work"><a href="#">Social Work</a></option>
 </select>
<div id="nusing">im field</div>
<div id="cookery">im field</div>
<div id="information>im field</div>
<div id="social-work">im field</div>

so when user selection option from dropdown, i want to scroll down to div according to selected value from drop down.

$('#course').on('change',function(){
        var $option = $(this).find('option:selected');
        var value = $option.val();
        console.log(value);

        setTimeout(function(){ 
            $('html, body').animate({
            scrollTop: $("#social-work").offset().top
        }, 2000);
        },500);
        })

above code gives what i desire but what i want is in scrolltop: $(“#social-work”).
i want dropdown value scrollTop: $(“#selected dropdown value here”)
so that is match div id and scroll down to div section

The jquery selector is a string, you can dynamically build it -

"#"+value
2 Likes

Remove the anchor from the option as that is invalid and pointless. :slight_smile:

e.g.

Is it a good idea to use a select for site navigation though? If Js is disabled then nothing works. The links won’t be indexed by search engines either.

1 Like

its not navigation its services, services are more then 30 plus, i thought this method is best for customer to desire services, on click the services title it take to its descriptions

No not really as a select element is a form element used when you want to gather data from your user and send to the server. It is not meant as a means of navigating to sections in your site.

Irrespective of the above you cannot put an anchor inside an option element as that is invalid and makes no sense as mentioned.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.