dropdown menu not working with jquery

Question

in my project i have menu and for smaller screen i use dropdown menu.here's html code for that.

<select> 
  <option value="index.php" id="home">Home</option>
  <option value="about?aboutus=aboutus" id="about">About Us</option>
  <option value="courses?cosoff=cosoff" id="courses">Courses Offered</option> 
  <option value="admission?admi=admi" id="admission">Admission</option> 
  <option value="facelities?face=face" id="facelities">Facelities</option>
  <option value="events?eve=eve" id="events">Events</option> 
  <option value="career.php?car=car" id="career">Career</option> 
  <option value="contact.php?con=con" id="contact">Contact</option> 
  </select>

and i use jquery for selecting menu and stay them selected.and it is

<script type="text/javascript">
   window.onload = function() {
      $(document).ready(function() {
         $("#about").children("option").is("selected").text()
      });
   }
</script>

this is just for id=about,like that for every id i had put jquery but it's not working for option value to set selected.and second problem is id=home is default selected then i go to for ex. id=about and then again i go to id=home it won't redirect to index.php

No need of wrapping ready() in load event. Remove that and it should work — Tushar
– Tushar, Commented Sep 1, 2015 at 11:04
#about is the id of one of your options, not of your select field — alanmm
– alanmm, Commented Sep 1, 2015 at 11:06
$("#about") is not the select, but one of the options. Are you sure you didn't meant <select id="about"> ??? — Amarnasan
– Amarnasan, Commented Sep 1, 2015 at 11:06

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can set an option selected using prop() function.

$(document).ready(function() {
    $("#about").prop('selected',true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select> 
  <option value="index.php" id="home">Home</option>
  <option value="about?aboutus=aboutus" id="about">About Us</option>
  <option value="courses?cosoff=cosoff" id="courses">Courses Offered</option> 
  <option value="admission?admi=admi" id="admission">Admission</option> 
  <option value="facelities?face=face" id="facelities">Facelities</option>
  <option value="events?eve=eve" id="events">Events</option> 
  <option value="career.php?car=car" id="career">Career</option> 
  <option value="contact.php?con=con" id="contact">Contact</option> 
</select>

Edit 1

It might not be very easy to give id's for all the options, so you can do the same using the index of the select option.

$(document).ready(function() {
    $("select option").eq(1).prop('selected', true);//selects the second option.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select> 
  <option value="index.php">Home</option>
  <option value="about?aboutus=aboutus">About Us</option>
  <option value="courses?cosoff=cosoff">Courses Offered</option> 
  <option value="admission?admi=admi">Admission</option> 
  <option value="facelities?face=face">Facelities</option>
  <option value="events?eve=eve">Events</option> 
  <option value="career.php?car=car">Career</option> 
  <option value="contact.php?con=con">Contact</option> 
</select>

Umesh Jesadiya · Accepted Answer · 2015-09-02 06:08:49Z

0

you have to use prop() function for that like.

$(document).ready(function() {
$("#yourid").prop('selected',true);
});

answered Sep 2, 2015 at 6:08

Umesh Jesadiya

861 silver badge6 bronze badges

Collectives™ on Stack Overflow

dropdown menu not working with jquery

2 Answers 2

Edit 1

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit 1

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related