CODEWITHSUNDEEP
phpjqueryhtml
Divyesh Jesadiya
Divyesh Jesadiya

Reputation: 957

dropdown menu not working with jquery

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

Upvotes: 3

Views: 123

Answers (2)

rrk
rrk

Reputation: 15846

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>

Upvotes: 6

Umesh Jesadiya
Umesh Jesadiya

Reputation: 86

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

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

Upvotes: 0

Related Questions