Как заполнить текущий раскрывающийся список с помощью 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

Для чего нужен второй клик? –

Вы пытались сделать фокус и/или размытие после завершения загрузки новых элементов? Я думаю, что это могло бы сделать трюк –

@AkhilThayyil на самом деле это не обязательно, но хотя элементы загружены и их присутствие может быть проверено с помощью таких инструментов, как firebug, размер раскрывающегося раскрывающегося списка остается небольшим для просмотра загруженных элементов. – motto

Вот некоторые обходные пути. Могу вам помочь.

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

В этом случае вам нужно будет создать собственное выпадающее меню с помощью div и image –

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

Как заполнить текущий раскрывающийся список с помощью jquery onclick?

ответ

Смежные вопросы