JQuery выпадающий из MySQL на основе предыдущего выбора - PullRequest
1 голос
/ 04 марта 2011

РЕДАКТИРОВАТЬ 2 Похоже, что это проблема с классом CSS.

РЕДАКТИРОВАТЬ Достаточно странно, что он работает на общедоступной стороне сайта, а не частным лицом.Это должен быть CSS или конфликт с другим плагином.

Позвольте мне вначале сказать, что у меня очень мало опыта работы с jQuery, и я впервые играю с ajax.

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

У меня есть html, который выглядит следующим образом

        <label for="employee_type">Employee Type</label>
        <select name="employee_type" id="employee_type">
                 <option value="1" selected="selected">Team Member</option>
                 <option value="2">Supervisor</option>
                 <option value="3">Manager</option>
           </select>        

        <label for="manager">Reports To</label>
        <select name="manager" id="manager_name">
                  <option value="0" selected="selected">Please Select Employee Role</option>
           </select>                 

Идея состоит в том, что при выборе роли или типа сотрудника в поле ниже заполняются все менеджеры, которые выше на едуchain.

У меня есть строка выбора MYSQL, написанная с помощью php, которая выводит некоторый json с использованием json_encode, вывод которого

[{"id":"2","first_name":"John","last_name":"Doe"}]

Это просто массив всех пользователей иих имена и идентификаторы должны быть показаны в массиве.

А вот и хитрая часть - Аякс.Я нашел этот урок , который я модифицировал

    // attach a change handler to the form
  $("select#employee_type").change(function(){
   //get the mininimum employee level   
    var input = $("select#employee_type").val();
    //get the callback url
    var ajax_url = "/admin/employee/get_json/"+input;

   $.ajax({
      url:ajax_url,
      data:{ url:escape(ajax_url) },
      dataType:"json",
      success:function(data){ 
              var select = $('#manager_name');
        var options = select.attr('options');
              $('option', select).remove();

        $.each(data, function(index, array) {
                options[options.length] = new Option(array['first_name']+ " "+array['last_name'],array['id']);
        })
                },

            error:function(xhr,err,e){ alert( "Error: " + err ); }
    }); // $.ajax()
    return false;
  }); // .submit()*/

Это работает примерно на 78% пути.Это добавляет правильные параметры и значение.Там, где он терпит неудачу, это то, что если у меня есть $('option', select).remove(); (что необходимо, чтобы гарантировать, что поля не добавляются при каждом изменении поля) Поле удаляется, когда я пытаюсь щелкнуть по нему.Я также думаю, что было бы неплохо удалить выбранную опцию (Пожалуйста, выберите ...).

Любая помощь по этому вопросу будет отличной!

1 Ответ

2 голосов
/ 04 марта 2011

Я бы предложил использовать .empty () вместо .remove (), так как вы фактически удаляете только дочерние элементы этого элемента вместо самого элемента.

success:function(data){ 
    var select = $('#manager_name');
        select.empty();

        $.each(data, function(index, array) {
               select.append(new Option(array['first_name']+ " "+array['last_name'],array['id']));
        })
},

Лично я не использовал новый метод Option, поэтому не могу убедиться, что он правильный.

Рабочий раствор должен быть http://jsfiddle.net/HffLg/10/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...