如何使用 JQUERY 将所选值保留在下拉框中？答案

【问题标题】：How to keep selected value in a dropdown box using JQUERY?如何使用 JQUERY 将所选值保留在下拉框中？
【发布时间】：2012-05-14 08:50:02
【问题描述】：

您好，我正在使用这样的 jquery 代码

$(".selfont").change(function(event){

$('#dav').val();

window.location ='?davQ=' + $('#dav').val() + '&pathogenQ=' + $('#pathogen').val() + '&topicQ=' + $('#topicF').val() ;

});

我想在每个下拉框中保留用户选择的下拉值。但目前该值不是用户选择的值，它始终显示第一个值。如何使用用户使用 jquery 选择的值设置下拉字段？请帮帮我。

我的第一个选择框代码如下所示

<select name="dav" id="dav" style="width: 275px" class='selfont' >
<option value='' class=''>Select one</option>
                        <?php

                                $test = mysql_query("SELECT DISTINCT DataVersion FROM olivesdeptable ORDER BY DataVersion DESC");
                                 $i=1;
                                 while($numval=mysql_fetch_array($test))
                                 {
                                          print "<option value=\"".$numval['DataVersion']."\">".$numval['DataVersion']."</option>";
                                          $i=$i+1;
                                  }
                          ?>

                    </select>

即使我们选择值，它也会在字段中显示为“选择一个”。

下拉字段的javascript代码

<script type="text/javascript">

if (document.getElementById("dav").selectedIndex < 1)
{
document.getElementById('pathogen').selectedIndex = "";
document.getElementById('pathogen').disabled = true;
}

if (document.getElementById("pathogen").selectedIndex < 1)
{
document.getElementById('topicF').selectedIndex = "";
document.getElementById('topicF').disabled = true;
}

if (document.getElementById("topicF").selectedIndex < 1)
{
document.getElementById('ind').selectedIndex = "";
document.getElementById('ind').disabled = true;
}

if (document.getElementById("ind").selectedIndex < 1)
{
document.getElementById('subind').selectedIndex = "";
document.getElementById('subind').disabled = true;
}

if (document.getElementById("subind").selectedIndex < 1)
{
document.getElementById('countryR').selectedIndex = "";
document.getElementById('countryRF').options.length = 0;
document.getElementById('countryRF').selectedIndex = "";
document.getElementById('countryR').disabled = true;
document.getElementById('countryRF').disabled = true;
}

</script>

即使值被更新，第二个下拉框显示为禁用？

下一个下拉字段标记如下

 <select name="pathogen" id="pathogen" style="width: 275px" class='selfont' >
    <option value=''>Select one</option>
                            <?php

                                    $test = mysql_query("SELECT DISTINCT Pathogen FROM olivesdeptable where DataVersion='$davQ' ORDER BY Pathogen ASC");
                                    $i=1;
                                     while($numval=mysql_fetch_array($test))
                                     {
                                              print "<option value=\"".$numval['Pathogen']."\">".$numval['Pathogen']."</option>";
                                              $i=$i+1;
                                      }
                              ?>

                    </select>

只有第一个保管箱值适用于下一个保管箱值存储在 url 但在页面中该值显示为“选择一个”？请帮忙排序

【问题讨论】：

你需要显示你的 html 标记，或者你可以为我们设置一个小提琴，jsfiddle.net
感谢回复，我已经更新了问题。
url 用列表框中选择的值更新，但在列表框中显示第一个值“选择一个”？

标签： php ajax jquery-ui jquery

【解决方案1】：

 $(document).ready(function () {
            $('#dav').val(getURLParameter('davQ'));

            $('#pathogenQ').val(getURLParameter('pathogenQ'));

            $('#topicQ').val(getURLParameter('topicQ'));

            $(".selfont").change(function (event) {
                 window.location = '?davQ=' + $('#dav').val() + '&pathogenQ=' + $('#pathogen').val() + '&topicQ=' + $('#topicF').val();
            });

            function getURLParameter(name) {
            return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]);
            }
        });

【讨论】：

非常感谢您提供的代码，它工作正常，但是我得到了一个运行在我上面的问题中已更新的字段的 javascript 代码。即使在第一个字段更新后，第二个字段仍然显示为禁用？是否需要任何修改？请帮助...提前谢谢。
在下拉框中选择的每次值都会在 window.location 参数中更新，并且下一个选择选项相对于第一个启用。
某些列表值包含+和％符号，同时选择其显示错误作为“要解码的URI不是有效的编码”。代码正在运行，非常感谢。我该如何纠正这个小错误？ @ThulasiRam

【解决方案2】：

<?php

  $test = mysql_query("SELECT DISTINCT DataVersion FROM olivesdeptable ORDER BY DataVersion DESC");
  $i=1;
  $selected = '';
  // make compare with the value you want to select with the parameter form url
  // here I assume $_GET['davQ'] holds the value to $numval['DataVersion']
  if($_GET['davQ'] == $numval['DataVersion']) $selected = 'selected';
  while($numval=mysql_fetch_array($test))
  {
     echo "<option value=\"".$numval['DataVersion']."\" $selected>".$numval['DataVersion']."</option>";
     $i=$i+1;
  }
?>

【讨论】：