Возможный дубликат:
Как загрузить второй раскрывающийся список из базы данных после первого раскрывающегося списка
Привет, у меня есть форма с двумя выпадающими списками.
Первый выбор заполняется портфелями пользователя, а второй должен быть заполнен группами портфелей. Я получаю все портфолио зарегистрированного пользователя и заполняю 1-й выбор с этими портфелями, теперь я хочу заполнить 2-й выбор группами на основе 1-го выбора, например, если пользователь выбирает портфолио_1, все группы в портфолио_1 должны загружаться во 2-й блок выбора.
Первый выбор с портфелями:
<select id="portfolios" name="portfolio" style="width: 200px; height:25px;"> <option selected="selected" value="default">Select Portfolio</option> {% for portfolio in portfolios %} <option value={{ portfolio.id }}>{{ portfolio.portfolioName }}</option> {% endfor %} </select> Я понимаю, что мне нужно вызвать ajax-функцию для обмена 1-го выбора в этом ajax. Мне нужно отправить выбранный идентификатор портфеля и найти все группы с этим идентификатором, а затем вернуть все эти группы и обновить только поле выбора 2 с теми группы,
Я не знаю, как я могу заполнить 2-й выбор группами, которые я получу
есть идеи?
благодаря
Ну, я бы просто вернул их в формате JSON, а затем ввел их в DOM:
$('#portfolios').on('change', function(){ $.getJSON('url/for/groups', function(pgroups) { var html = ''; $.each(pgroups, function(value, name) { html += '<option value="'+value+'">'+name+'</option>'; }); $('#portfolio-groups').html(html); }); });
<select id="portfolios" name="portfolio" style="width: 200px; height:25px;" onchange="getgropus(this.value)"> <option selected="selected" value="default">Select Portfolio</option> {% for portfolio in portfolios %} <option value={{ portfolio.id }}>{{ portfolio.portfolioName }}</option> {% endfor %} </select> <select id="secondselectBox" name="secondselectBox" ></select> call the ajax function on the onchange event of your 1st selectbox // here is JS code <script type="text/javascript"> function getgropus(id){ $.ajax({ type: 'post', url: "your php file path to get groups ", data: "&id="+id, complete: function(data) { $('#secondselectBox').html(data.responseText) } }); } </script> on your php file make options for selectbox of group portfolio and adjust according to your requirnments <option value="default">Portfolio groups</option> .......