下拉菜单不适用于jquery

时间:2015-09-01 11:02:43

标签: php jquery html

在我的项目中我有菜单,对于较小的屏幕,我使用下拉菜单。那里有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>

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

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

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

2 个答案:

答案 0 :(得分:6)

您可以使用 prop() 功能设置选项。

&#13;
&#13;
$(document).ready(function() {
    $("#about").prop('selected',true)
});
&#13;
<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>
&#13;
&#13;
&#13;

编辑1

为所有选项提供id可能不是很容易,所以你可以使用select选项的索引来做同样的事情。

&#13;
&#13;
$(document).ready(function() {
    $("select option").eq(1).prop('selected', true);//selects the second option.
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你必须使用 prop()功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js plugins/excanvas.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.axislabels.js"></script>

<script type="text/javascript">
    var data=[];
    var dataset;
    var updateInterval = 1000;
    function getdata(){
        var con= new ActiveXObject('ADODB.Connection');
        var connectionString="Provider= OraOLEDB.Oracle;User id=SYSTEM;Password=sandp;datasource=ORA";
        con.Open(connectionString);

        var rs=new ActiveXObject('ADODB.Recordset');
        rs.Open("select W_DATE,DATA from cet", con);
        var i=0;
        while(!rs.eof)
        {
            data.push([rs(0)*1000,rs(1)]);
            data[i++];
            rs.movenext;
        }

        rs.close;
        con.close;
    }

    var options= {
        series: {
            lines: {
                show: true,
                lineWidth: 1.2,
                fill: true
            }
        },
        xaxis: {
            mode: "time",
            tickSize: [2, "second"],
            timeformat:"%m/%d %H:%M",                               ,
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
        yaxis: {
            min: 0,
            max: 100,        
            tickSize: 5,
            tickFormatter: function (v, axis) {
                if (v % 10 == 0) {
                    return v;
                } 
                else {
                    return "";
                }
            },
            axisLabel: "Data loading",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
        },
        legend: {        
            labelBoxBorderColor: "#fff"
        },
        grid: {
            backgroundColor: { 
                colors: ["#B0D5FF", "#5CA8FF"] 
            }
        }
    };

    $(document).ready(function () {
        getdata();
 
        dataset = [
            { label: "Data", data: data }
        ];
 
        $.plot($("#container"), dataset, options);
 
        function update() {
            data.shift();
            getdata();
 
            $.plot($("#container"), dataset, options)
            setTimeout(update, updateInterval);
        }
 
        update();
    });
</script>
</head>

<body>
    <div id="container" style="width:1360px; height:1200px"></div>
</body>
</html>