Question

我需要一件简单的事情，但我不知道如何：

我有一个包含一些记录的表...我想放入一个显示表中记录视图的选择字段。我的选择字段是

<select>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
</select>

当用户单击四个选项中的一个（例如，10）时，我需要重新加载页面并获取值10 ...所以我可以更改数据库中的查询。我可以使用提交按钮执行此操作，但看起来很糟糕。因为您必须选择，然后每次都单击“提交”按钮。

我更喜欢从选择字段中选择值并在页面重新加载后......是否可以？

Answer 1

您的HTML代码

<select name="select" id="select" onchange="reload_page_for_DB(this.value);">
  <option value="">Please choose an option</option>
  <option value="?db_value=5">5</option>
  <option value="?db_value=10">10</option>
  <option value="?db_value=15">15</option>
  <option value="?db_value=20">20</option>
</select>

Javascript函数

<script>

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

function reload_page_for_DB(value){
   if(value != ''){
    var dbIndexValue = document.getElementById("select").selectedIndex;
    createCookie('dbIndexValue',dbIndexValue,0);
    parent.location = value;
   }
}

function selected_index(){
   var dbIndexValue = readCookie('dbIndexValue');
   if(dbIndexValue != null){
    document.getElementById('select').selectedIndex = dbIndexValue;
   }
   else{
    document.getElementById('select').selectedIndex = 0;
   }
}
selected_index();
</script>

Answer 2

这个

有两种方法

第一种方法是使用简单的表单提交。

第二种方式是使用Ajax。这样您就不必保存选择值，只需在页面上获得结果，甚至无需重新加载页面。

这样做的简单方法是使用Ajax！但是如果您不喜欢Ajax并想重新加载页面，那么您可以这样做！

表格提交

$('select').change(function () { // Change in the select element
    $(this.form).submit(); // Submit its form!
}

现在在服务器端从数据库中获取结果。但请注意，您将使用相同的数字重新选择select语句！

让我给你一个ASP.NET例子;因为我知道这一点，但这会给你一个想法！

<select>
  <option @if(selected_value == '5') {selected} value="5">5</option>
  <option @if(selected_value == '10') {selected} value="10">10</option>
  <option @if(selected_value == '15') {selected} value="15">15</option>
  <option @if(selected_value == '20') {selected} value="20">20</option>
</select>

我正在为selected_value使用变量，然后使用if else块来测试其对条件的有效性。如果为true，则使用selected属性选择值。如果不是真的那么继续下一个！

selected属性是一个布尔值，因此您可以使用其中任何一个！

selected
selected=""
selected="selected"。

他们都会完美地运作。

使用Ajax

$('select').change(function () {
    $.ajax({
        url: 'url_from_where/page_would_be_loaded.html',
        data: $(this.form).serialize(); // Serialize current form or use only
        data: 'selected_value=' + $(this).val();
        success: function (data) {
          // Show the results on the page!
        }
    })
}

有关详细信息，请参阅：

.change() （jQuery更改方法）
Category: Ajax （jQuery Ajax）
<select> （选择HTML）

Answer 3

试试这个：

$('select').change(function(){
    $('.your-form').submit();
});

您需要为表单指定一个类或ID才能选择它（在我的情况下，我使用了类your-form）。

或试试这个：

$('select').change(function(){
    $(this).closest('form').submit();
});

显然，您需要在$(document).ready()内包含此代码。

提交带有选择字段的表单

3 个答案:

这个

表格提交

使用Ajax

有关详细信息，请参阅：