JQuery填充选择框但发布选项消失后

Question

我有一个 SVG 地图。当有人点击一个州说“堪萨斯”时，它会显示一个表单并用点击的州填充州选择框，比如堪萨斯。代码 - 这工作正常。这段代码在头脑中。

var itemval= '<option value="'+data.name+'">'+ stateData[data.name].fullName+'</option>';
$("#SelItem").html(itemval);

当表单提交并回发到同一页面时，我正在使用

<form method="POST" action="theform.php" onsubmit="return  validateForm(this);">  

当页面回传到同一页面时，选择框为空。选择框在那里，但没有选项。

我在 Google 上搜索了以下代码以及一些类似的方法，但它们不起作用。我在头部和选择下使用了这段代码，但没有运气。

var selectedVal = $("#SelItem").val();
$("#SelItem").val(selectedVal);

**HTML**
<select id="SelItem"><option></option></select>

我已经为此工作了几个小时，但似乎找不到解决方案。

有人可以告诉我在表单提交并返回同一页面后如何保留选择值吗？

Answer 1

当页面加载时，您需要检查您发布的值是否存在，如果存在，则将 php 值传递给 javascript 代码以填充选择选项，或者直接在 html 中使用它来创建选择选项。

首先，您应该在 html 中为您的 select 提供一个 name 属性，以便将值传递到 php 中的 $_POST 数组中：

<select id="SelItem" name="SelItem">

这是您可以在 javascript 中填充它的一种方法（请注意，此代码依赖于 var stateData 在同一范围内）：

$(document).ready(function(){
    <?php if (!empty($_POST['SelItem'])): ?>
        var posted_state = '<?php echo $_POST['SelItem'];?>';
        if (stateData[posted_state] !== undefined) {
            var itemval= '<option value="'+posted_state+'" selected>'+ stateData[posted_state].fullName+'</option>';
            $("#SelItem").html(itemval);
        }
    <?php endif; ?>
});

编辑：上述方法的替代方法是将其放在 html 中的 select 标签：

<select id="SelItem" name="SelItem">
    <?php if (!empty($_POST['SelItem'])): ?>
        <option value="<?php echo $_POST['SelItem'];?>" selected>
            <?php echo $_POST['SelItem']; // this would be better if you can replace it with fullname ?>
        </option>
    <?php else: ?>
        <option></option>
    <?php endif; ?>
</select>

请注意，此方法在编写时有几个问题。首先，此示例中的选项文本不是州全名，而是缩写。接下来，您不应该信任$_POST 的内容，因为恶意用户可以轻松地将其更改为您不希望的值。最好在处理帖子的 php 代码中验证 $_POST['SelItem'] 的值，以确保在使用它之前它实际上是正确的值之一。这就是为什么在前面的示例中，我在尝试将值添加到您的选择之前检查了if (stateData[posted_state] !== undefined)。

编辑：

要从 php 提供状态全名，您还需要在 php 端定义一组状态（我只在客户端的 javascript 代码中看到它）。

所以在 php 中，如果你有类似的东西：

$states = array(
    'AK' => 'Alaska',
    'AL' => 'Alabama',
    // etc...
);

那么你就可以用posted state的缩写来获取全名了：

if (array_key_exists($_POST['SelItem'], $states))
    $fullname = $states[$_POST['SelItem']];