Question

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

当select：焦点选择器工作的那一刻，虽然你必须点击两次才能达到我想要的结果。

请参阅小提琴 - 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>

因为我需要在第一次点击后禁用：焦点选择器我尝试过这样的事情吗？

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

Answer 1

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

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

select:focus {
    width: 100%;
}

Answer 2

这样做：

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

使用左侧的选项向右显示HTML选择下拉列表

2 个答案:

JS Fiddle Demo