如何用 jquery onclick 填充当前下拉列表？答案

【问题标题】：how to fill current dropdown list with jquery onclick?如何用 jquery onclick 填充当前下拉列表？
【发布时间】：2012-03-10 14:31:32
【问题描述】：

我知道链式下拉列表有很多解决方案，但我正在尝试创建一些与往常不同的东西。

用户点击前的菜单：

<select>
 <option>Choose Something</option>
</select>

用户点击后的菜单：

<select>
<option>Loading options</option>
</select>

从服务器加载选项后的菜单：

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

问题是菜单填充后，它的大小很小，直到第二次点击才会出现其他项目。

有解决办法吗？

【问题讨论】：

第二次点击是为了什么？
在新元素的加载完成后，您是否尝试过聚焦和/或模糊？我认为这可以解决问题
@AkhilThayyil 实际上它不应该是必要的，但是虽然项目已加载并且它们的存在可以通过诸如萤火虫之类的工具进行验证，但打开的下拉列表的大小仍然很小，无法查看加载的项目。
如果大小只重要，则将选择的 with 更改为某个合适的值；即
@motto 我知道这是一个旧问题，但如果您能够找到原因以及如何解决它会有所帮助。

标签： jquery html drop-down-menu

【解决方案1】：

这里有一些解决方法。可能会对你有所帮助。

HTML（空 option 作为占位符）

<select>
  <option>Select Something</option>
  <option>&nbsp;</option> 
  <option>&nbsp;</option>
  <option>&nbsp;</option>
</select>

JavaScript

var clickCount = 0;
$("select").click(function(e) {
   if (clickCount == 0) $("select").empty().html("<option>Loading options</option>");
   clickCount++;
   if (clickCount == 1) {
       $("select").click();
       return;
   }
   if (clickCount == 2) {
       $("select").empty().html("<option>Select Something</option><option>1</option> <option>2</option> <option>3</option><option>4</option> ");
       $("select :nth-child(1)").attr("selected", "selected");
   }
});

Demo 1 或 Demo 2 在 jsfiddle.net 上。

希望这对你有用。

【讨论】：

是的，这是一种解决方法，但我认为这不是我正在寻找的正确解决方案。
在这种情况下，您必须在 div 和 image 的帮助下创建自己的下拉菜单

【解决方案2】：

$("select").click(function(){ 
    $("select").empty().append("<option>Loading options</option>");
    $.ajax({
        url: 'http://www.your_server.com/your_page',
        success: function (data) {
            $("select").empty().append(data); //your data being: <option>1</option> <option>2</option> <option>3</option><option>4</option>

        }
    })        
})

【讨论】：