Question

以amazon.com为例，如果您点击搜索栏中的过滤器，则所选项目的大小会发生变化，而其他下拉列表项目的大小会固定。

说我有这个HTML

<select>
    <option value="book">book</option>
    <option value="board_game">board game</option>
    <option value="dvd">DVD</option>
    <option value="all">All</option>
</select>

我希望选中这个项目，说“所有”＆＃39;宽度小于＆board; game_game＆＃39;被选中了。如有必要，我将如何在CSS和jquery中执行此操作。

Answer 1

样式选择选项似乎非常有限。我的猜测是亚马逊没有使用标准的select-option标记。相反，他们可能正在使用javascript来显示div而不是选项菜单。这样他们就可以应用您尝试的效果。

我不确定你到底有什么影响，但我已经创建了一个可能是你的良好起点的codepen。它使用jquery填充隐藏的容器，当您单击虚拟选择菜单时，该容器会显示。

它的html看起来像这样：

<div id="select">
    Item Select
    <option value="book" disabled>book</option>
    <option value="board_game">board game</option>
    <option value="dvd">DVD</option>
    <option value="all" disabled>All</option>
</div>

<div id="options"></div>

Demo is here

希望这证明是一个有用的起点。

Answer 2

自从你最初发布它以来，我一直在喋喋不休，我学到了很多东西 - 谢谢。

我已经遍历了亚马逊代码，他们可以选择跨越。有很多样式的跨度和选项，即使使用F12工具我也无法弄清楚。

但我回到基础并认为宽度可变的最常见方法之一是使用“跨度” - 所以我将所选文本放在一个范围内。

其次，选项的高级样式非常困难，如果不是不可能的话，因此该选项仅用于选择过程 - 它在需要时添加到div中并在完成时删除。

这是FIDDLE。

JS

$myoption = "<select class='myselect'><option>selection</option><option>Small</option>                <option>Medium</option><option>Laaaaarge</option><option>Really Looooong</option></select>";

$('.bigdiv').on('click', function(){
    if( $('.bigdiv > .myselect' ).length > 0 )
      { 
       return;
       }
     else
      {
       $('.bigdiv').append($myoption);
       console.log('appended');
       }
});

$( document ).on('change','.myselect', function(){
    console.log('change');
    var myselection = $('.myselect').val();
    console.log('Selection =' + myselection);
    $('.myspan').html( myselection );
    $('.myselect').remove();    
});

$('.remove').on('click', function(){
    $('.myselect').remove();    
});

那些亚马逊程序员非常有想象力和光滑。我希望他们中的一个能过来并给我们一些暗示 - 不泄露任何“秘密”： - ）

创建所选项目更改大小的下拉列表

2 个答案: