1

如果 div 包含表单字段，那么修改 div 容器的 innerHTML 对 http 请求有效负载有什么影响？

这是第一个.html

<html>
<body>
        <script type="text/javascript">

        function changeDropdown(){
            document.getElementById('divId').innerHTML="";
            var options = "<select name='suffix' id='suffix'></select>";
            document.getElementById('divId').innerHTML=options;         

        }
    </script>
    <br><br>
    <p>testing http header issue</p>
    <a href="javascript:changeDropdown()">Change dropdown</a>
    <form name="test" action="second.html" method="post">
        <table align="center">
            <tr>
                <td>
                    <label for="name">Name</label>
                </td>
                <td>
                    <input type="text" name="name"/>
                </td>
            </tr>       
            <tr>
                <td>
                    <label for="suffix">Suffix</label>
                </td>
                <td>
                    <div id="divId">
                        <select name="suffix" id="suffix">
                            <option value="Mr" selected=selected>Mr</option>
                            <option value="Mrs" selected=selected>Mrs</option>
                            <option value="Ms" selected=selected>Ms</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="submit"</td>
            </tr>
        </table>
    </form>
</body>

如果我在两个字段中输入一个值，然后单击提交，这就是我在 chrome 的请求字段中看到的值。（网络-> 标头）

**Request Payload**
      name=Batman&suffix=Mr

现在再次打开 first.html。这次单击“更改下拉菜单”链接。这将删除所有选项。现在输入名称并单击提交。

这是 Chrome 标头中的值

 **Request Payload**
      name=Batman

参数“后缀”从 http(?) 参数列表中消失了。我已经清楚地使用 innerHTML 将完整的选择元素添加回表单。但由于某种原因，它没有被认可。

有趣的是，如果我在选择字段中添加一个空选项，它就会被拾取。即将javascript函数更改为

 document.getElementById('divId').innerHTML="";
 var options = "<select name='suffix' id='suffix'><option value=''></option></select>";
 document.getElementById('divId').innerHTML=options;

如果有人知道为什么会发生这种情况以及我可以做些什么来纠正这个问题而不必像上面那样添加一个虚拟选项，请分享。谢谢！

4

1 回答 1

0

我认为这完全与这样一个事实有关，当您重新添加时，<select>您添加它时没有任何可能的选项，因此 chrome 忽略了该变量（因为它永远无法设置）。

<option>这可以通过您的空白再次产生所需结果这一事实得到证实。

于 2012-06-11T21:57:59.710 回答