下拉菜单不适用于jquery

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

在我的项目中我有菜单和较小的屏幕我使用下拉菜单。这是html代码。

<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

我使用jquery选择菜单并保持选中状态。它是

<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

这只是为了id = about,就像我已经放入jquery的每个id一样,但是它不能用于设置selected的选项值。第二个问题是id = home默认选择然后我转到ex。 id = about然后我再去id = home它不会重定向到index.php

2 个解决方案

#1

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

您可以使用prop()函数设置选择的选项。

$(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.

为所有选项提供id可能不是很容易,因此您可以使用select选项的索引执行相同操作。

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

#2

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

你必须使用prop()函数。

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