首页 > 解决方案 > 如何将一个选择元素与另一个选择语句相关联

问题描述

我在表单中有两个 select html 元素。每当用户单击“添加”按钮时,都会创建这两个选择元素。所以表单里面有这对html select语句的多个实例。代码如下所示:

<form action="create.php" method="POST">
  <div class="user_role">
    <select name="users[]">
       <option value="1"> John </option>
       <option value="2"> Doe </option>
    </select>
    <select>
       <option value="1"> Browser </option>
       <option value="2"> Project Manager </option>
    </select>
  </div>
  <div>
     <input type="button" name="add" id="add" value="Add User" 
  </div>
  <div>
     <input type="submit" name="submit" value="submit" />
  </div>
</form>

如果我单击提交按钮,$_POST 数组包含以下值:

Array ( 
    [users] => Array ( 
                       [0] => 1  
                     )  
    [submit] => submit 
  )

我不知道在第二个选择的“名称”属性上放置什么,以便我可以连接两个选择语句。

我想要完成的是,当存储在 $_POST 全局数组中时,我希望有一种方法可以将第二个选择上的值作为其对应用户在第一个选择上的角色值。例子:

User: John     <-- first html select statement

role: Browser  <-- second html select statement
___________________________________________________

User: Doe  <-- first html select statement

role: Project Manager  <-- second html select statement

标签: phphtmlpost

解决方案


你可以尝试这样的事情:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
    <select name="users[1][name]">
       <option value="1"> John </option>
       <option value="2"> Doe </option>
    </select>
    <select name="users[1][role]">
       <option value="1"> Browser </option>
       <option value="2"> Project Manager </option>
    </select>
<div>
     <input type="submit" name="submit" value="submit" />
  </div>
</form>

</body>
</html>

提交的表单数据如下所示:

users[1][name]=1&users[1][role]=1&submit=submit 

如果您想以用户身份添加另一组选择输入 - 只需增加该值。所以下一个添加的集合看起来像这样:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
    <select name="users[1][name]">
       <option value="1"> John </option>
       <option value="2"> Doe </option>
    </select>
    <select name="users[1][role]">
       <option value="1"> Browser </option>
       <option value="2"> Project Manager </option>
    </select>
<!-- Newly added by js -->
    <select name="users[2][name]">
       <option value="1"> John </option>
       <option value="2"> Doe </option>
    </select>
    <select name="users[2][role]">
       <option value="1"> Browser </option>
       <option value="2"> Project Manager </option>
    </select>
<div>
     <input type="submit" name="submit" value="submit" />
  </div>
</form>

</body>
</html>

如果在创建时确定要插入的索引有问题,您需要修改您的 JS“添加”功能。

有几种方法 - 您可以存储一些变量来保持用户数量从 1 开始,每次添加时您都会增加它。

您还可以计算选择的数量并获得适当数量的下一个元素您还可以修改表单的结构以将两个选择存储在具有某个类的 div 中并对其进行元素计数。

这里有一些关于 jsFiddle 和原生 JavaScript 的指导: https ://jsfiddle.net/mrba8dLy/


推荐阅读