我有一个基于工具参数动态生成的表单。根据所选选项显示或隐藏的表单中的子节。我正试图从用户输入中收集数据，并希望为可见部分或选定部分创建字典。

<form class="tool-form">
<button type="submit" id="submit"></button>
<div class="ui-form-element section-row" id="uid-4">
   <label class="custom_file_upload">
      <input type="file"><input type="text" name="infile" list="car">
      <datalist id="car">
         <option>Volvo</option>
         <option>Suzuki</option>
      </datalist>
      <i class="fa fa-cloud-upload"> Upload Data</i>
   </label>
</div>
<div class="ui-form-element section-row" id="uid-5">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Peptide Column</span></div>
   <input id="input-uid-5" name="peps">
</div>
<div class="ui-form-element section-row" id="uid-6">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Method to convert data</span></div>
   <select name="method" id="select-uid-6">
      <option value="0"> Convert Without Split </option>
      <option value="1">Split Data By Class Label</option>
   </select>
</div>
<div class="ui-form-element section-row pl-2 " id="uid-6-section-0" style="display: block;">
   <div class="ui-form-element section-row" id="uid-8">
      <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Column with the class label</span></div>
      <input id="input-uid-8" name="classlabel">
   </div>
   <div class="ui-form-element section-row" id="uid-10">
      <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Peptide ID Column</span></div>
      <select name="columnselect" id="select-uid-10">
         <option value="0"> Add Peptide ID Column Name </option>
         <option value="1"> No Peptide ID Column </option>
      </select>
   </div>
   <div class="ui-form-element section-row pl-2 " id="uid-10-section-0" style="display: block;">
      <div class="ui-form-element section-row" id="uid-12">
         <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Column name with peptide IDs</span></div>
         <input id="input-uid-12" name="clmname">
      </div>
   </div>
   <div class="ui-form-element section-row pl-2 " id="uid-10-section-1" style="display: none;"></div>
</div>
<div class="ui-form-element section-row pl-2 " id="uid-6-section-1" style="display: none;">
<div class="ui-form-element section-row" id="uid-14">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Column name with peptide IDs</span></div>
   <select name="columnselect" id="select-uid-14">
      <option value="0"> Add Peptide ID Column Name </option>
      <option value="1"> No Peptide ID Column </option>
   </select>
</div>
<div class="ui-form-element section-row pl-2 " id="uid-14-section-0" style="display: block;">
<div class="ui-form-element section-row" id="uid-16">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Select Peptide ID Column</span></div>
   <input id="input-uid-16" name="clmname">
</div>

我试图创建这样的函数，但它不像我希望的那样工作；

<form class="tool-form">
<button type="submit" id="submit"></button>
<div class="ui-form-element section-row" id="uid-4">
   <label class="custom_file_upload">
      <input type="file"><input type="text" name="infile" list="car">
      <datalist id="car">
         <option>Volvo</option>
         <option>Suzuki</option>
      </datalist>
      <i class="fa fa-cloud-upload"> Upload Data</i>
   </label>
</div>
<div class="ui-form-element section-row" id="uid-5">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Peptide Column</span></div>
   <input id="input-uid-5" name="peps">
</div>
<div class="ui-form-element section-row" id="uid-6">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Method to convert data</span></div>
   <select name="method" id="select-uid-6">
      <option value="0"> Convert Without Split </option>
      <option value="1">Split Data By Class Label</option>
   </select>
</div>
<div class="ui-form-element section-row pl-2 " id="uid-6-section-0" style="display: block;">
   <div class="ui-form-element section-row" id="uid-8">
      <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Column with the class label</span></div>
      <input id="input-uid-8" name="classlabel">
   </div>
   <div class="ui-form-element section-row" id="uid-10">
      <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Peptide ID Column</span></div>
      <select name="columnselect" id="select-uid-10">
         <option value="0"> Add Peptide ID Column Name </option>
         <option value="1"> No Peptide ID Column </option>
      </select>
   </div>
   <div class="ui-form-element section-row pl-2 " id="uid-10-section-0" style="display: block;">
      <div class="ui-form-element section-row" id="uid-12">
         <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Column name with peptide IDs</span></div>
         <input id="input-uid-12" name="clmname">
      </div>
   </div>
   <div class="ui-form-element section-row pl-2 " id="uid-10-section-1" style="display: none;"></div>
</div>
<div class="ui-form-element section-row pl-2 " id="uid-6-section-1" style="display: none;">
<div class="ui-form-element section-row" id="uid-14">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Column name with peptide IDs</span></div>
   <select name="columnselect" id="select-uid-14">
      <option value="0"> Add Peptide ID Column Name </option>
      <option value="1"> No Peptide ID Column </option>
   </select>
</div>
<div class="ui-form-element section-row pl-2 " id="uid-14-section-0" style="display: block;">
<div class="ui-form-element section-row" id="uid-16">
   <div class="ui-from-title"><span class="ui-form-title-text" style="display: inline;">Select Peptide ID Column</span></div>
   <input id="input-uid-16" name="clmname">
</div>

我不想使用Jquery来实现这一点。

谢谢

顺晟科技：