jquery - 如何用 jquery onclick 填充当前下拉列表?

标签 jquery html drop-down-menu

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

用户点击前的菜单:

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

问题是菜单填充后,它的尺寸变小,其他项目直到第二次点击才出现。

有解决办法吗?

最佳答案

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

HTML(空选项作为占位符)

<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 1Demo 2在 jsfiddle.net 上。

希望这对你有用。

关于jquery - 如何用 jquery onclick 填充当前下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9357938/

相关文章:

javascript - 将参数发送到函数而不执行直到单击 javascript/Jquery

java - HtmlUnit - 将 HtmlPage 转换为 HTML 字符串?

javascript - 动态地将数据放入选择选项下拉列表(jQuery)

jquery SlideToggle() 和未知高度?

javascript - 当 SQLite 列为 true 时,将类添加到列表元素

php - AJAX -> PHP 没有持续更新 MySQL 数据库

html - 火狐浏览器 : why does &lt;input type ="slider"> retain its slider position after a reload (F5) of the page?

jquery - 如何在 Angular Material 中显示下拉列表

PHP SQL 循环返回 PHP 代码

jquery - 如何在不知道父级高度的情况下垂直居中 div?