Question

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

用户点击前的菜单：

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

问题出在菜单填写后，其大小很小，其他项目在第二次点击之前不会出现。

有解决方案吗？

Answer 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");
   }
});

jsfiddle.net上的

Demo 1或Demo 2。

希望这对你有用。

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

        }
    })        
})

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

2 个答案: