当所有选择框都有一个名称时，如何从 DOM 添加/删除选择框，以便在提交时从活动选择框获得值？

Posted 2023-05-09

【中文标题】当所有选择框都有一个名称时，如何从 DOM 添加/删除选择框，以便在提交时从活动选择框获得值？

【英文标题】：How can I add/remove select boxes from DOM when all select boxes have one name so that upon Submit I get value from active select box?

【发布时间】：2021-08-08 05:19:59

【问题描述】：

TL;DR：当我有多个同名的选择框时，我希望能够使用当前活动的 html select 框进行选择，但任何时候只有一个选择框处于活动状态.

--

我的问题是 - 我有多个 filename 选择框，在提交时，始终发送位于 HTML 底部且 HTTP 请求中具有 filename 名称的最后一个选择框的值。我想找到一种方法只发送与当前活动的a_XX_row 框相关联的filename，而不发送任何其他的。

即我选择 40 的 id，我应该只看到“A-40 Designer and Specs”的框，而不是 800 框。当我按下提交时，我希望 POST['filename'] 有“A-40 Designer and Specs”，但我总是得到“A-800 Designer E.xlsm”，因为它是最后一个select HTML 文件。

$('#modelid').on('change', function() 
    
    if (this.value == 40)
        $('.a_40_row').show();
    else
        $('.a_40_row').hide();

    if (this.value == 800)
        $('.a_800_row').show();
    else
        $('.a_800_row').hide();

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><table>
  <tr>
    <td>
      <select name="id" id="modelid">
        <option value="0">--select--
        <option value="40">40
          <option value="800">800
      </select>
    </td>
  </tr>
  <tr class="a_40_row" style="display: none;">
    <td>Version</td>
    <td>
      <select name="filename">
        <option selected>A-40 Designer and Specs B.xlsm</option>
        <option>A-40 Designer and Specs A.xlsm</option>
      </select>
    </td>
  </tr>
  <tr class="a_800_row" style="display: none;">
    <td>Version</td>
    <td>
      <select name="filename">
        <option>A-800 Designer E.xlsm</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="submit"></td>
  </tr>
</table></form>

【问题讨论】：

在主题上，不要隐藏和显示不同的控件，用你需要的填充控件。根据您的需要。在一个完整的旁注......不要使用table标签进行布局。

^ 这将是一个可接受的解决方案。 .... 为此，我需要预加载所有可能的 filenames，然后在我认为选择时动态加载它们

【参考方案1】：

不显示/隐藏选择表单。

您只需要在第一个选择更改时更新第二个选择

这样做的方法：

const 
  myForm = document.forms['my-form']
, filenames = 
  [  model:  '40', cod: 'A-40-B',  fn:'A-40 Designer and Specs B.xlsm' 
  ,  model:  '40', cod: 'A-40-A',  fn:'A-40 Designer and Specs A.xlsm' 
  ,  model: '800', cod: 'A-800-E', fn:'A-800 Designer E.xlsm'          
  ]  

myForm.modelid.onchange = () =>
  
  myForm.filename.innerHTML = ''
  filenames
    .filter(x=>x.model===myForm.modelid.value)
    .forEach( filename=>
      
      myForm.filename.add( new Option(filename.fn,filename.cod))
      
    )
  

select,
button 
  display : block;
  float   : left;
  clear   : left;
  margin  : .3em;
  
select  
  min-width : 8em;
  padding   : 0 .3em;
    
  

<form name="my-form">
  <select name="modelid" >
    <option value="" selected disable >--select--</option>
    <option value="40"  >  40 </option>
    <option value="800" > 800 </option>
  </select>
 
  <select name="filename"></select>
 
  <button type="submit">submit</button>
</form>

【参考方案2】：

两个选项，

在显示元素时启用/禁用元素。 用您需要的内容填充一个字段。

选项 1：

$('#modelid').on('change', function() 
    //Set visibility
    $('.a_40_row').toggle(this.value == 40);
    //Toggle disabled
    $('.a_40_row [name=filename]').prop("disabled", this.value != 40);
    $('.a_800_row').toggle(this.value == 800)
    $('.a_800_row [name=filename]').prop("disabled", this.value != 800);    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><table>
  <tr>
    <td>
      <select name="id" id="modelid">
        <option value="0">--select--</option>
        <option value="40">40</option>
          <option value="800">800</option>
      </select>
    </td>
  </tr>
  <tr class="a_40_row" style="display: none;">
    <td>Version</td>
    <td>
      <select name="filename" disabled>
        <option selected>A-40 Designer and Specs B.xlsm</option>
        <option>A-40 Designer and Specs A.xlsm</option>
      </select>
    </td>
  </tr>
  <tr class="a_800_row" style="display: none;">
    <td>Version</td>
    <td>
      <select name="filename" disbled>
        <option>A-800 Designer E.xlsm</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="submit"></td>
  </tr>
</table></form>

选项 2： - 这使用 HTML 5，在 IE 10 及更低版本中存在问题

$('#modelid').on('change', function() 
   $(".row").show();
   var selVal = $(this).val();
   //Go through the options
   $("[name=filename] option").each(function()
     //Dont use jquerys data here, it will convert to a number when it can
     //Get array of values where can display from the data attribute
     var arrDisplay = this.dataset.display.split(",");
     //Add the hidden property if not contained in array -- wont work in IE 10 and older
     $(this).prop("hidden", !arrDisplay.includes(selVal));
     //Set a default
     $(this).prop("selected", $(this).data("optiondefault") && !arrDisplay.includes(selVal) )
   );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><table>
  <tr>
    <td>
      <select name="id" id="modelid">
        <option value="0">--select--</option>
        <option value="40">40</option>
          <option value="800">800</option>
      </select>
    </td>
  </tr>
  <tr class="row" style="display: none;">
    <td>Version</td>
    <td>
      <select name="filename">
        <option data-display="40" data-optiondefault="true">A-40 Designer and Specs B.xlsm</option>
        <option data-display="40">A-40 Designer and Specs A.xlsm</option>
        <option data-display="800" data-optiondefault="true">A-800 Designer E.xlsm</option>
        <option data-display="40,800">Hybrid</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="submit"></td>
  </tr>
</table></form>