动态展开下拉菜单答案

【问题标题】：Dynamically expand Dropdowns动态展开下拉菜单
【发布时间】：2017-02-23 18:47:47
【问题描述】：

我有一个表格，其中包含多个不同长度（宽度）的下拉列表。
我希望较短的下拉菜单与较长的下拉菜单具有相同的宽度：

一个快速的解决方案是：

.mySel {
  width: 35%;
}

但是，当然，这不是动态的。

有什么方法可以动态定义较短下拉菜单的宽度，使其扩展到整个表格单元格？
也许用 jQuery？

Here is a fiddle.

【问题讨论】：

您的 html 有两个具有相同 ID 的选择下拉菜单，您永远不应该对同一页面中的不同元素拥有相同的 ID，接受它并过上幸福的生活。
@rahul_m：谢谢，我已经更正了。
那么一切都会奏效。 css 或 jquery 也可以

标签： javascript jquery html css

【解决方案1】：

你可以像这样使用弹性盒子来实现这一点

.flx{
  display:flex;
}

.flx select {
  flex-grow: 1;
}

<table border="1">
  <tbody>
    <tr>
      <td>Some Text</td>
      <td>
      <div class="flx">
      
    
        From:
        <select id="mySel1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        To:
        <select id="mySel2">
          <option>11</option>
          <option>12</option>
          <option>13</option>
        </select>
          </div>
      </td>
    </tr>
    <tr>
      <td>More Text</td>
      <td>
        <select>
          <option>Option 4</option>
          <option>Option 5</option>
          <option>Option 3</option>
        </select>
        <select>
          <option>A very loooong option</option>
          <option>Option 5</option>
          <option>Option 3</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

试试这个答案https://stackoverflow.com/a/37601680/7490341 我的建议是为每个下拉菜单维护单独的 <td>，并以 css 样式按照上面的链接进行操作

【讨论】：

下一次，每当您有与问题相关的答案或之前问过的相同问题时，请提出重复标志。