JQuery填充选择框，但后选项消失 [英] JQuery populating select box but after post options disappear

问题描述

我有一个SVG地图。当某人点击某个州时，堪萨斯州会显示一个表单并填充状态选择框，其状态为点击状态，即堪萨斯州。代码 - 这是行得通的。这段代码在头部。

  var itemval ='< ; option value ='+ data.name +'>'+ stateData [data.name] .fullName +'< / option>'; 
 $（＃SelItem）。html（itemval）; 
  

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

 < form method =POSTaction =theform.phponsubmit =return validateForm（this）;> 
  

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

我在Google上搜索过，我发现下面的代码加上一些类似的方法，但它们不起作用。

  var selectedVal = $（＃SelItem ）.VAL（）; 
 $（＃SelItem）。val（selectedVal）; 
 
 ** HTML ** 
< select id =SelItem>< option>< / option>< / select> 
  

我一直在为此工作数小时，但似乎找不到解决方案。

有人能告诉我如何在提交表单并返回到同一页面后保持选择值？

解决方案

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

所以值被传递到php中的$ _POST数组中：

< select id =SelItemname =SelItem>

这里有一种方法可以在javascript中填充它（注意这段代码依赖于var stateData
$ $ p $ $（$）$（document）.ready（function（）{
< $ p> ;？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 +< /选项>;
$（＃SelItem）。html（itemval）;
}
<？php endif; ？>
}）;


编辑：上面的替代方法是将它放在选择标记的html中：

 < select id =SelItemname =SelItem> 
 <？php if（！empty（$ _ POST ['SelItem']））：？> 
< option value =<？php echo $ _POST ['SelItem'];？>选择> 
<？php echo $ _POST ['SelItem']; //如果你可以用全名替换它，这会更好吗？> 
< / option> 
<？php else：？> 
< option>< / option> 
<？php endif; ？> 
< / select> 
  

注意这个方法在写入时有几个问题。首先，这个例子中的选项文本不会是州的全名，而是缩写。接下来，您不应该相信 $ _ POST 的内容，因为恶意用户可以轻松将其更改为您不打算的值。在php代码中验证 $ _ POST ['SelItem'] 的值会更好，它可以处理帖子，以确保它在使用前确实是一个正确的值它。这就是为什么在前面的例子中，我试图将值添加到你的select中之前，检查 if（stateData [posted_state]！== undefined）。 b
$ b

编辑：

为了提供php的状态全名，你还需要一个php端定义的状态数组（我只看到它在你的JavaScript代码是客户端）。

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

  $ states = array（
'AK'=>'阿拉斯加'，
'AL'=>'阿拉巴马'，
 //等。 .. 
）; 
  

然后您可以使用发布状态缩写来获取全名：

  if（array_key_exists（$ _ POST ['SelItem']，$ states））
 $ fullname = $ states [$ _ POST ['SelItem']] ; 
  

I have an SVG map. When someone clicks on a state say, "Kansas" it displays a form and populates the state select box with the state that was clicked on say, it's Kansas. Code - This is working fine. This code is in the head.

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

When the form is submitted and it posts back to the same page, I'm using

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

When the page post back to the same page the select box is empty. The select box is there but with no option.

I've searched on Google I found the code below plus a few similar ways but they don't work. I've used this code in the head and under the select but no luck.

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

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

I've been working on this for hours but can't seem to find a solution.

Can someone tell me how to keep the select value after the form has been submitted and returns to the same page?

解决方案

When the page loads you need to check for the presence of your posted value, and if it's there pass the php value to either the javascript code to populate the select option, or use it directly in the html creating the select options.

First off, you should give your select a name attribute in the html so the value is passed into the $_POST array in php:

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

Here's one way you can populate it in javascript (note this code relies on the var stateData being in the same scope):

$(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; ?>
});

EDIT: An alternative to the above would be to put it in the html for the select tag:

<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>

Note this method has a couple issues as it's written. First off, the option text in this example won't be the state full name but the abbreviation. Next, you shouldn't trust the contents of $_POST because a malicious user can easily change it to a value you didn't intend it to be. It would be better to validate the value of $_POST['SelItem'] in your php code that handles the post to make sure it is actually one of the correct values before using it. That is why in the previous example I did the check if (stateData[posted_state] !== undefined) before attempting to add the value to your select.

EDIT:

To provide the state fullname from php you need an array of states defined on the php side also (I only see it in your javascript code which is client side).

So in php if you have something like:

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

Then you can use the posted state abbreviation to get the fullname:

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

这篇关于JQuery填充选择框，但后选项消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！