提交表单后保持选择的值答案

【问题标题】：Keep values selected after form submission提交表单后保持选择的值
【发布时间】：2011-01-15 19:36:06
【问题描述】：

考虑：

<form method="get" action="">
   <select name="name">
      <option value="a">a</option>
      <option value="b">b</option>
   </select>
   <select name="location">
      <option value="x">x</option>
      <option value="y">y</option>
   </select>
   <input type="submit" value="Submit" class="submit" />
</form>

提交表单时，如何确保所选值在下拉列表中保持选中状态？此表单位于 WordPress (PHP) 中。

【问题讨论】：

标签： php javascript html wordpress forms

【解决方案1】：

<select name="name">
    <?php $options = ["a", "b", "c", "d", "e"];
        foreach($options as $o){                            
            if($o == $_GET['name']) $attr="selected='true'";
            else $attr = "";
            echo "<option value='{$o}' {$attr}>{$o}</option>";
        } 
    ?>
</select>

我们可以预先创建一个选项数组，并且只使用简单的 if/else 来检查是否被选中。如果您想要不同的数据值和不同的显示选项值，您也可以使用关联数组。

<select name="name">
    <?php $options = ["a"=>"Option A", "b"=>"Option B", "c"=>"Option C", "d"=>"Option D", "e"=>"Option E"];
        foreach($options as $index=>$o){                            
            if($index == $_GET['name']) $attr="selected='true'";
            else $attr = "";
            echo "<option value='{$index}' {$attr}>{$o}</option>";
        } 
    ?>
</select>

【讨论】：

【解决方案2】：

我在 WordPress 中工作不多，但对于 WordPress 之外的表单，这很好用。

PHP

location = "";  // Declare variable

if($_POST) {
    if(!$_POST["location"]) {
        $error .= "Location is required.<br />"; // If not selected, add string to error message
     }else{
        $location = $_POST["location"];          // If selected, assign to variable
     }

HTML

<select name="location">
    <option value="0">Choose...</option>
    <option value="1" <?php if (isset($location) && $location == "1") echo "selected" ?>>location 1</option>
    <option value="2" <?php if (isset($location) && $location == "2") echo "selected" ?>>location 2</option>
</select>

【讨论】：

【解决方案3】：

仅 JavaScript 解决方案：

var tmpParams = decodeURIComponent(window.location.search.substr(1)).split("&");
for (var i = 0; i < tmpParams.length; i++) {
    var tmparr = tmpParams[i].split("=");
    var tmp = document.getElementsByName(tmparr[0])[0];
    if (!!tmp){
        document.getElementsByName(tmparr[0])[0].value = tmparr[1];
    }
}

或者如果你使用的是 jQuery，你可以替换

 var tmp = document.getElementsByName(tmparr[0])[0];
 if (!!tmp){
     document.getElementsByName(tmparr[0])[0].value = tmparr[1];
 }

与：

 $('*[name="'+tmparr[0]+'"]').val(tmparr[1]);

【讨论】：

【解决方案4】：

如果您使用的是 WordPress（与 OP 一样），您可以使用 selected 函数。

<form method="get" action="">
  <select name="name">
    <option value="a" <?php selected( isset($_POST['name']) ? $_POST['name'] : '', 'a' ); ?>>a</option>
    <option value="b" <?php selected( isset($_POST['name']) ? $_POST['name'] : '', 'b' ); ?>>b</option>
  </select>
  <select name="location">
    <option value="x" <?php selected( isset($_POST['location']) ? $_POST['location'] : '', 'x' ); ?>>x</option>
    <option value="y" <?php selected( isset($_POST['location']) ? $_POST['location'] : '', 'y' ); ?>>y</option>
  </select>
  <input type="submit" value="Submit" class="submit" />
</form>

【讨论】：

我认为这是 WordPress 的最佳解决方案。这个对我有用。谢谢。

【解决方案5】：

由于 WordPress 已经使用 jQuery，您可以尝试以下方法：

var POST=<?php echo json_encode($_POST); ?>;
for(k in POST){
  $("#"+k).val(POST[k]);
}

【讨论】：

使用这种方法有安全问题吗？

【解决方案6】：

在尝试了所有这些“解决方案”之后，没有任何效果。我之前对W3Schools 做过一些研究，记得有关于保持无线电价值的解释。

但它也适用于Select 选项。请参阅下面的示例。试一试并玩一下。

<?php
    $example = $_POST["example"];
?>
<form method="post">
    <select name="example">
        <option <?php if (isset($example) && $example=="a") echo "selected";?>>a</option>
        <option <?php if (isset($example) && $example=="b") echo "selected";?>>b</option>
        <option <?php if (isset($example) && $example=="c") echo "selected";?>>c</option>
    </select>
    <input type="submit" name="submit" value="submit" />
</form>

【讨论】：

【解决方案7】：

为了避免许多 if-else 结构，让 JavaScript 自动完成：

<select name="name" id="name">
   <option value="a">a</option>
   <option value="b">b</option>
</select>

<script type="text/javascript">
  document.getElementById('name').value = "<?php echo $_GET['name'];?>";
</script>

<select name="location" id="location">
  <option value="x">x</option>
  <option value="y">y</option>
</select>

<script type="text/javascript">
  document.getElementById('location').value = "<?php echo $_GET['location'];?>";
</script>

【讨论】：

奇怪的解决方案 IMO-引入 javascript 来保存几行 PHP 没有意义。
@Yarin：同意，一个快速的解决方案，到那时在办公室，没有太多时间:(
很好的解决方案，但有点粗略。在 LEMP 堆栈上使用，我无法重新加载 nginx。使用 sudo tail /var/log/nginx/error.log 调试后，错误直接出现在这些行中，删除代码后我能够重新加载就好了
值是正确的，但我得到“未捕获的类型错误：无法设置 null 的属性'值'”选择名称匹配...idk

【解决方案8】：

只需更改这一行：

 <input type="submit" value="Submit" class="submit" />

用这一行：

 <input type="submit" value="Submit/Reload" class="submit" onclick="history.go(-1);">

【讨论】：

【解决方案9】：

尝试此解决方案以将所选值保留在下拉列表中：

<form action="<?php echo get_page_link(); ?>" method="post">
    <select name="<?php echo $field_key['key']; ?>" onchange="javascript: 
       submit()">
    <option value="">All Category</option>
    <?php 
    foreach( $field['choices'] as $key => $value ){ 
       if($post_key==$key){ ?>
          <option value="<?php echo $key; ?>" selected><?php echo $value; ?></option>
<?php
   }else{?>
  <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
 <?php }
  }?>
 </select>
</form>

【讨论】：

【解决方案10】：

这对我有用！

<label for="reason">Reason:</label>
<select name="reason" size="1" id="name" >
    <option value="NG" selected="SELECTED"><?php if (!(strcmp("NG", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>Selection a reason below</option>
    <option value="General"<?php if (!(strcmp("General", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>>General Question</option>
    <option value="Account"<?php if (!(strcmp("Account", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>>Account Question</option>
    <option value="Other"<?php if (!(strcmp("Other", $_POST["reason"]))) {echo "selected=\"selected\"";} ?>>Other</option>

</select>

【讨论】：

【解决方案11】：

<form method="get" action="">
 <select name="name" value="<?php echo $_GET['name'];?>">
   <option value="a">a</option>
   <option value="b">b</option>
 </select>
 <select name="location" value="<?php echo $_GET['location'];?>">
   <option value="x">x</option>
   <option value="y">y</option>
 </select>
   <input type="submit" value="Submit" class="submit" />
</form>

【讨论】：

这不起作用。您需要在要选择的选项上设置selected 属性。

【解决方案12】：

<select name="name">
   <option <?php if ($_GET['name'] == 'a') { ?>selected="true" <?php }; ?>value="a">a</option>
   <option <?php if ($_GET['name'] == 'b') { ?>selected="true" <?php }; ?>value="b">b</option>
</select>

【讨论】：

如果option标签是在代码中生成的（如果不是，那为什么不呢？）你可以把检查放在循环中。