Javascript onchange功能

时间:2014-04-16 08:46:53

标签: javascript php jquery html

我知道这将是一个非常基本的问题,但请耐心等待我,因为我刚开始使用js和jquery。

这是我的代码部分 -

<html>
<head>
</head>
<body>
<form method="post" action="module.php">
 <select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
       <option value > Select Duration </option>
       <option value="/module.php/?dateRange=1d">Last 24 Hours</option>
       <option value="/module.php/?dateRange=2d">Last 2 Days</option>
       <option value="/module.php/?dateRange=1w">Last Week</option>
       <option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
       <option value="/module.php/?dateRange=1m">Last Month</option>
       <option value="/module.php/?dateRange=3m">Last 3 Months</option>
       <option value="/module.php/?dateRange=6m">Last 6 Months</option>
       <option value="/module.php/?dateRange=1y">Last Year</option>
       <option value="/module.php/?dateRange=all">All</option>
</select>
</form>
</body>
</html>

现在我不理解如何编写一个onchange函数,我可以执行所有查询,并在用户从下拉列表中选择任何值时取消我的结果。之后,我想将所选值存储在变量中,并在同一页面中使用该值?

4 个答案:

答案 0 :(得分:2)

假设您为选择输入提供了一个名为mySelect的ID。

然后你可以定义:

<script type="text/javascript">

$('#mySelect').on('change', function () {
    // do your thing
});

</script>

上面为您的元素附加了一个onchange事件(jQuery),每次用户更改选择时都会触发该事件。

答案 1 :(得分:1)

您将使用处理程序

 <html>
 <head>
 </head>
 <body>

 <form method="post" action="module.php">
   <select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
      <option value > Select Duration </option>
      <option value="/module.php/?dateRange=1d">Last 24 Hours</option>
      <option value="/module.php/?dateRange=2d">Last 2 Days</option>
      <option value="/module.php/?dateRange=1w">Last Week</option>
      <option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
      <option value="/module.php/?dateRange=1m">Last Month</option>
      <option value="/module.php/?dateRange=3m">Last 3 Months</option>
      <option value="/module.php/?dateRange=6m">Last 6 Months</option>
      <option value="/module.php/?dateRange=1y">Last Year</option>
      <option value="/module.php/?dateRange=all">All</option>
 </select>
</form>

 <script>
 $( document ).ready(function() {

 $( "select" )
    .change(function () {
   alert('OnChange happened');
    //you can add your stuff here
    });
  })

 });
  </script>
</body>
</html>

答案 2 :(得分:0)

我创建了fiddle:)

它使用

$('#duration').on('change', function () {
  var selectedEl = $('#duration').val();
    console.log(selectedEl);
});

检测select和val()中的更改以获取所选选项。

答案 3 :(得分:0)

Instead of this :
   <select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
 Try This :
   <select name="dateRange" size="1" onchange="submit();">

And in 'MODULE.php' get the selected value using :
  $var = $_POST['dateRange'];
  echo $var;

And then write your query..