选项选择获取值而不重新加载页面

时间:2015-09-08 08:04:40

标签: javascript jquery html5

我想用select选项对页面内容进行排序,但是如何防止重新加载页面呢?

我知道它不能在PHP中完成,所以我需要帮助,如何在javascript中执行此操作或者在ajax中执行此操作。

这是我的代码

<select name="quantity">
   <option value="1"></option>
   <option value="2"></option>
</select>


 <?php
    $redirect_url = "example.com/process.php?&quantity=" . $_POST['quantity'];
    header("Location: " . $redirect_url);
?>

已更新

这是我想要排序的代码:

$sql = '';

                            if(isset($_POST['search'])){
                                $search = sanitize($_POST['search']);
                                $cat = sanitize($_POST['category']);

                                if(!empty($search)){
                                    $search_query = mysql_query("SELECT * FROM products WHERE `product_name` LIKE '%$search%' OR `category` LIKE '%$cat%'".$sql);

                                    while ($results_row = mysql_fetch_assoc($search_query)){
                                            echo '<div class="product"><a href="product.php?id='.$results_row['id'].'"><img style="border:1px solid black;" src="'.$results_row['img_path'].'/'.$results_row['img_name'].'" width="230px" height="230px"/></a><br><div class="br"></div><strong>'.$results_row['product_name'].'</strong><br>Cijena: '.$results_row['price'].'kn</div>';
                                        }
                                }
                            }else{

                            }

我按照这样排序:

$sql = '';

            if(isset($_GET['sort'])){
                if ($_GET['sort'] == 'year')
                {
                    $sql = " ORDER BY year";
                }
                elseif ($_GET['sort'] == 'IMDBrating')
                {
                    $sql = " ORDER BY IMDBrating";
                }
                elseif ($_GET['sort'] == 'userrating')
                {
                    $sql = " ORDER BY userrating";
                } 
            }

        ?>

            <th><a href="http://localhost/New folder (3)/index.php?sort=year">Year</a></th>
            <th><a href="http://localhost/New folder (3)/index.php?sort=IMDBrating">IMDB rating</a></th>
            <th><a href="http://localhost/New folder (3)/index.php?sort=userrating">user rating</a></th>

但我想用<select><option> not with`

对其进行排序

2 个答案:

答案 0 :(得分:0)

sort my page content with select option是否清除了您想要的内容,但是对于重新加载功能,请使用jQuery ajax

<强> HTML

<select name="quantity" id="quantity">
 <option value="1"></option>
 <option value="2"></option>
</select>

<强> JS

<script>
$(function(){
  $('#quantity').change(function(){
    var value = $(this).val();
    $.ajax({
     type: "POST",
     url: "example.com/process.php", // url to request
     data: { 
      quantity: value  // send data
     },
     success : function(data){
       // populate data here
     }
    });
  });
});
</script>

<强> process.php

$quantity = $_POST['quantity'];
echo $quantity // this value will available in success callback function

答案 1 :(得分:0)

您可以在事件发生时对其进行排序,例如:

 document.getElementsByName('quantity').onclick=function(){

//then put here what you want to be executed
}

然后整个页面将不会被重新加载。只需运行一段代码。