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

我知道有很多鏈式下拉列表的解決方案，但我試圖創造一些有點不同的東西。之前，用戶點擊如何用jquery onclick填充當前下拉列表？

菜單：用戶後

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

的問題後菜單填滿，其大小很小，其他項目纔會出現，直到第二次點擊。

有沒有解決方法呢？

來源

2012-02-20 motto

第二次點擊的目的是什麼？ – 2012-02-20 08:15:45

加載新元素完成後，您是否嘗試過重點和/或模糊？我認爲這可能會訣竅 – 2012-02-20 08:16:17

@AkhilThayyil實際上它不應該是必要的，但雖然項目被加載，並且他們的存在可以通過像螢火蟲這樣的工具進行驗證，但打開的下拉列表的大小對於查看加載的項目仍然很小。 – motto 2012-02-20 08:20:10

以下是一些解決方法。可以幫助你。

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。

希望這能爲你解決。

來源

2012-02-20 09:01:32

是的，這是一種解決方法，但我不認爲這是一個正確的解決方案，我一直在尋找。 – motto 2012-02-21 20:16:14

在這種情況下，您將不得不在div和image的幫助下創建自己的下拉菜單 – 2012-02-22 04:31:14

$("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> 

     } 
    })   
})

來源

2012-02-20 08:21:09

不工作你測試過嗎？ http://jsfiddle.net/bSPEY/2/ – motto 2012-02-21 20:26:21

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

回答

相關問題