如何在下拉列表中获取除隐藏和提交按钮之外的所有表单字段

Posted 2023-05-09

【中文标题】如何在下拉列表中获取除隐藏和提交按钮之外的所有表单字段

【英文标题】：How to get all form fields except hidden and submit button in a dropdown

【发布时间】：2019-05-18 16:05:51

【问题描述】：

<form class="myform" id="myform">
  First name:<br>
  <input type="text" id="input_1" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" id="input_2 "name="lastname" value="Mouse">
  <br><br>
  Agree:<br>
  <input type="radio" id="input_3 "name="agree" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

如何在选择/下拉列表中按名称获取所有表单字段并在选择时返回 id？

【问题讨论】：

您能分享一下您尝试过的方法以及问题所在吗？这些字段是动态创建的，以防止您使用这些字段添加静态选择吗？如果是动态创建的，是怎么做的？

【参考方案1】：

您可以在表单上使用querySelectorAll，然后生成您的选择器所需的字典：

let selector_vals = ;
let input_select = $("#input_select");
$("#myform input:not([type=submit])").each(function(idx, elem) 
    selector_vals[elem.name] = "#" + elem.id;
    input_select.append(new Option(elem.name,"#" + elem.id));
);

console.log(selector_vals);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Form Items<br/>
<select id="input_select"></select>

<form class="myform" id="myform">
  First name:<br>
  <input type="text" id="input_1" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" id="input_2 "name="lastname" value="Mouse">
  <br><br>
  Agree:<br>
  <input type="radio" id="input_3 "name="agree" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

【讨论】：

这正是我所需要的，现在我怎样才能将它附加到 ？例如 elem.name

@Usman 添加了生成select的代码，如果您不需要跟踪ID，则可以删除selector_vals，因为循环已经将options直接添加到select

【参考方案2】：

使用以下命令-

用于获取表单的特定输入字段 -

var p = $('input[type=text]')

然后在 ID 为“#select”的下拉元素上使用 -

$('#select').append($('<option></option>').val(p).html(p));

这里的“p”只不过是你从上面的 jquery 选择器中得到的所有元素。

虽然在这里我真的无法为您提供更多帮助。请发布代码并重新提出您的问题。