jquery empty(), предотвращающий выбор

Некоторое время назад я разместил этот вопрос, спрашивая, как получить данные JSON в раскрывающиеся списки jQuery Выпадающий список jquery из mysql на основе предыдущего выбора

Ну, люди здесь были потрясающими, и я нашел решение. Проблема, с которой я столкнулся сейчас, заключается в том, что предлагаемое решение не работает в моей производственной среде, но работает в моем тесте.

Чтобы предотвратить дублирование входов, я использую jQuery empty(), проблема в том, что использование empty(), похоже, также мешает мне выбрать первый вариант.

это функция, которая генерирует optiosn из JSON

function(data){

            var select = $('[name="employee_manager"]');
            select.empty();
            select.append(new Option(ucfirst('No Manager'),'100'));

            $.each(data, function(index, array) {

                    select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id']));
            });

Это альтернатива empty(), которая не будет препятствовать выбору?

РЕДАКТИРОВАТЬ Это кажется проблемой только в том случае, если динамически вводится менее двух элементов
РЕДАКТИРОВАНИЕ 2 Вот HTML. Кажется, я не могу выбрать первый вариант, если присутствует empty()

     <label for="manager">Reports To</label>
     <select name="employee_manager">
          <option value="1">Please Select Employee Role</option>
          <option value="2">John Doe</option>
          <option value="3">James Smith</option>
    </select>

ИЗМЕНИТЬ 3

Похоже, что пустой класс добавляет диапазон к моему выбору

<div class="selector">
<span style="-moz-user-select: none;">Jane  Smith</span>
    <select name="employee_manager" style="opacity: 0;">
         <option value="100">No Manager</option>
</select>
</div>

EDIT 4
Итак, вот jsfiddle, который показывает проблему. Мне не удалось правильно загрузить данные JSON, но вы все равно можете увидеть проблему, если попытаетесь щелкнуть первый элемент в списке. Кажется, это проблема с uniformjs, как если бы юниформа была удалена, это не проблема http://jsfiddle.net/BandonRandon/xXUfp/1/


javascript json jquery uniform pyrocms
person Brooke.    schedule 20.03.2011    source источник
comment
Что вы подразумеваете под «выбором»? Я не вижу в вашем коде ничего, что бы "выбирало" элемент.   -  person Kevin    schedule 20.03.2011
comment
Извините, я обновил вопрос, включив в него html, который выполняет выбор.   -  person Brooke.    schedule 20.03.2011
comment
похоже, что data - это ответ ajax, какой тип data? json?   -  person Santosh Linkha    schedule 20.03.2011
comment
@experimenX, да. Моя форма восстанавливает штраф ajax. Просто без empty() каждый раз, когда я выбираю, список повторяется. а с empty() не могу выбрать первый вариант.   -  person Brooke.    schedule 20.03.2011

Ответы (2)


arrow_upward
5
arrow_downward

Не используйте empty() для очистки параметров раскрывающегося списка. Это неправильно, потому что его следует использовать для удаления дочерних элементов DOM.

Вместо этого используйте такой код:

$("select[name='employee_manager'] > option").remove();

Редактировать: при использовании плагина jQuery uniform динамическое добавление параметров приводит к путанице ... один из способов, который не требует идти и пытаться исправить плагин, - это всегда иметь достаточно «фиктивных» параметров (например, 20, если это максимальное количество параметров), затем измените текст/значение этих параметров и скройте все остальные в соответствии с вашими данными.
Правильный код JS теперь будет выглядеть так:

var myData = [];
myData.push( { text: "Please Select A Manager (JS)", value: "null" } );
myData.push( { text: "No Manager", value: "100" } );
myData.push( { text: ucfirst("a third choice"), value: "42" } );
$.each(data, function(index, array) {
   myData.push( { text: ucfirst(array['first_name'])+ " " + ucfirst(array['last_name']), value: array['id'] } );
});

$("select[name='employee_manager'] > option").each(function(index) {
   if (index < myData.length) {
      $(this).text(myData[index]["text"]);
      $(this).val(myData[index]["value"]);                          
      $(this).show();
   }
   else {
        $(this).hide();
   }
});

Обновлен jsFiddle.

Грубо, но работает.... :)

person Shadow Wizard Wearing Mask V2    schedule 20.03.2011
comment
по какой-то причине у меня такая же проблема с удалением. Я думаю, что это проблема css. Я добавляю выбранный класс в диапазон. См. редактирование 3 выше. - person Brooke.; 20.03.2011
comment
@BrandonRandon, не забудьте проверить с помощью firebug - person Santosh Linkha; 20.03.2011
comment
@experimentX Я проверяю с помощью firebug, вот как я понял, что он добавляет диапазон. Нет ошибок JS. не уверен, что еще искать или почему он добавляет диапазон. - person Brooke.; 20.03.2011
comment
@BrandonRandon, попробуй что-то похожее на мое, но без гарантии - person Santosh Linkha; 20.03.2011
comment
Это работает лучше, чем empty(), но все еще не решило проблему. Моя работа заключалась в том, чтобы добавить select.append(new Option(ucfirst('Please Select A Manager'),'null')); в качестве первого варианта, и пользователь просто не может его выбрать, и это нормально. - person Brooke.; 20.03.2011
comment
@ Брэндон не чувствует себя обязанным принимать ответ, если он не полностью решил вашу проблему, давайте попробуем его зафиксировать. Можете ли вы воспроизвести это поведение без запроса AJAX? Можете ли вы разместить такой пример на jsFiddle? - person Shadow Wizard Wearing Mask V2; 20.03.2011
comment
@shadow, Edit 4 содержит ссылку на jsfiddle. Я думаю, что это проблема с uniformjs. - person Brooke.; 21.03.2011
comment
Это сработало, вы правы, грубо, но сработало. Теперь мне просто нужно выяснить, как получить цикл while в моем php-массиве для фиктивных значений, но я открою для этого новый поток :) (PS, это Бэндон или Брук, а не Брэндон: P) - person Brooke.; 21.03.2011
comment
Я думаю, что сказал слишком рано.. .push, похоже, не возвращает значения, но если я использую alert(), я получаю значения. не уверен, что это проблема с тем, как создаются входы - person Brooke.; 21.03.2011
comment
@Bandon Ой! Надо было смотреть внимательнее - к счастью, вы получаете уведомление, поскольку вы здесь ОП. :) Что касается push(), он ничего не должен возвращать, просто вставьте данный элемент в массив - опубликуйте свой новый код, и я постараюсь посмотреть, что может быть не так. Обратите внимание, что когда вы наберете 12 правок, ваш вопрос станет Вики сообщества. - person Shadow Wizard Wearing Mask V2; 21.03.2011
comment
@shadow, ваш код, казалось, работал нормально после того, как я разобрался с PHP и фиктивными значениями. БЛАГОДАРНОСТЬ - person Brooke.; 22.03.2011

arrow_upward
0
arrow_downward

Ну попробуйте что-то вроде этого, но не гарантируется

$('<option></option>').val(100).html('No Manager').appendTo($(select));

$.each(data, function(index, array) {
    $('<option></option>').val(array['id']).html(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']).appendTo($(select));
});
person Santosh Linkha    schedule 20.03.2011
comment
Это все еще дублирует все поля. Вы также забыли ), но я это исправил. PS, это BandonRandon, а не BRandonRadon :) - person Brooke.; 20.03.2011
comment
@BandonRandon извините за это, потому что я не проверял это. удачи... Упс! пришлось снова редактировать. - person Santosh Linkha; 20.03.2011