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

以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>

书
棋盘游戏
数字化视频光盘
全部的

---

我希望选择的项目，比如说“全部”比选择“棋盘游戏”时的宽度小。如果需要，我将如何在CSS和jquery中实现这一点

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

我不确定你到底想要什么效果，但我创建了一个代码笔，这可能是一个很好的起点。它使用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>

项目选择
书
棋盘游戏
数字化视频光盘
全部的

---

希望这能成为一个有用的起点。

自从你最初发布这篇文章以来，我一直在努力，我学到了很多——谢谢

我一遍又一遍地浏览亚马逊的代码，他们在一段时间内就有了选择。跨度和选项有很多样式，即使使用F12工具我也无法理解

但我回到了基础，认为让宽度可变的最常见的方法之一是使用“span”——因此我将所选文本放在span中

第二，对选项进行高级样式化非常困难（如果不是不可能的话），因此该选项仅用于选择过程-在需要时将其添加到div中，在完成时将其删除

这是你的电话号码

JS

$myoption=“selectionSmall mediumlaaaaaarerally loooong”；
$（'.bigdiv'）。在（'click'，function（）上{
如果（$（'.bigdiv>.myselect'）.length>0）
{ 
返回；
}
其他的
{
$（'.bigdiv'）.append（$myoption）；
console.log（'added'）；
}
});
$（document）.on（'change'，'.myselect'，function（）{
console.log（'change'）；
var myselection=$（'.myselect'）.val（）；
log（'Selection='+myselection）；
$（'.myspan'）.html（myselection）；
$（'.myselect'）.remove（）；
});
$（'.remove'）。在（'click'，function（）上{
$（'.myselect'）.remove（）；
});

---

那些亚马逊程序员很有想象力，也很圆滑。我希望他们中的一个能过来给我们一个提示-不要透露任何“秘密”：-

你试过什么了吗？你是说选择后选项区域的最终宽度吗？@TimSPQR我是说更改所选项目的宽度，即你点击以打开下拉菜单的项目，明白了吗。我正在研究一个解决方案，通过查看Amazon代码，他们将下拉列表放在一个范围内。我这里有一个非常初步的提琴--我现在要睡觉了，但早上我会再绕一圈--只是将选项选择器移动到holder div，并对其进行样式化…还没有完成。看起来不错，我会在早上检查。谢谢

$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();    
});