在右侧显示 HTML 选择下拉列表，在左侧显示选项

Question

需要一个小的 jquery/javascript 脚本来更改焦点选择器，以便在下拉列表中选择一个选项时，它会保持 HTML 选择下拉列表的宽度（不是最宽的选项）。

选择：焦点选择器起作用的那一刻，尽管您必须单击两次才能达到我想要的结果。

见小提琴 - https://jsfiddle.net/qsca7nr2/2/

    <table width="100%">
      <tr>
        <td width="80%">
                    Some long paragrph here klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj f
        </td>
        <td>
          <div class="dropdown_container">
            <select class="my_dropdown" id="my_dropdown">
                      <option value="1">MEDIUMMMM OPTION</option>
                      <option value="2">short</option>
                      <option value="3">LONG LONG LONG LONG LONG LONG LONG L LONGLO PTIONLOPTI ONLOPTIONLO PTIONLOPT IONOPTION x</option>
            </select>
          </div>  
        </td>
      </tr>
    </table>

因为我需要在第一次点击后禁用 :focus 选择器，所以我尝试过类似的操作？

    $(function() {
                $("select").change(function() {
                   $( this ).blur();
                });
    }

Answer 1

这样做：

$(function () {
    $("select").change(function () {
        $(this).blur();
    });
});

JS Fiddle Demo

Answer 2

我以两种方式解释您的问题 - 您需要实际的下拉控件来保持其大小，同时忽略单击时打开的托盘的大小，或者您希望托盘也具有相同的大小。

对于前者，您只需将 CSS 更改为：

select:focus {
    width: 100%;
}