jQuery для обновления списка выбора - PullRequest
Новая
       8

jQuery для обновления списка выбора

0 голосов
/ 07 марта 2011

У меня есть форма, в которой пользователь может отправить форму, чтобы указать, какие системы необходимо обновить. В форме они могут динамически добавлять системы в форму, поэтому у меня нет доступных уникальных идентификаторов. В форме им нужно выбрать платформу (unix, hp, wintel и т. Д.), А затем соответствующую модель для сопровождения выбранной платформы - подумайте, приковать к цепочке. Когда первый выбранный список в «элементе» изменяется, делается ajax-вызов для получения значений для 2-го списка выбора. Как я могу обновить второй список выбора в «элементе» только для соответствующего цепочки выбора?

Я использую метод клонирования, чтобы позволить пользователям добавлять элементы в форму. Таким образом, идентификатор больше не уникален на странице, поэтому я использую класс, чтобы выяснить, какая кнопка выбора была изменена. Как это работает прямо сейчас, каждый второй список выбора обновляется, и я хочу, чтобы обновлялся только выбранный список выбора, соответствующий 1-му списку выбора. Я считаю, что next () - это ответ, но я полагаю, что мой синтаксис неправильный.

Класс 1-го списка выбора - платформа, а 2-го - модель.

обновляет каждый второй список выбора : $ ("select.model"). Html (параметры)

ничего не обновляется : $ ("select.model"). Next (). Html (options);

Любая помощь будет оценена. 

<div id="mySelectArea">
  <select id="myFirstOption" class="myFirstOption">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select id="mySecondSelect" class="mySecondSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>    
  </select>
</div>

<div id="mySelectArea">
  <select id="myFirstOption" class="myFirstOption">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select id="mySecondSelect" class="mySecondSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>    
  </select>
</div>

<script>
jQuery(document).ready(function()
    {
    $(".myFirstOption").live("change", function() {
        $.getJSON("live_getModels.cfm",{platform: $(this).val()},       
        function(j){
            var options = '';
            for (var i = 0; i < j.length; i++) 
                {
                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                }
        $(this).next("#mySecondSelect").html(options);      
        });
    });

});
</script>

А вот пример результатов JSON для более точной демонстрации: 

[{"optionValue":"", "optionDisplay":"Select Model"},{"optionValue":"TBD", "optionDisplay":"TBD"},{"optionValue":"SCCM", "optionDisplay":"SCCM-standalone"},{"optionValue":"Manual", "optionDisplay":"Manual-standalone"},{"optionValue":"SCCM-VMWare", "optionDisplay":"SCCM-VMWare"},{"optionValue":"Manual-VMWare", "optionDisplay":"Manual-VMWare"},{"optionValue":"SCCM Hybrid", "optionDisplay":"SCCM Hybrid"},{"optionValue":"SCCM Hybrid VMWare", "optionDisplay":"SCCM Hybrid VMWare"},{"optionValue":"SCCM Offline", "optionDisplay":"SCCM Offline"},{"optionValue":"SCCM Offline - VMWare", "optionDisplay":"SCCM Offline - VMWare"}]

Ответы [ 2 ]

1 голос
/ 07 марта 2011

Если я правильно читаю, причина .next () не работает, потому что вы выбираете выпадающий список, который хотите обновить, а затем переходите к следующему.если ваш (псевдо) html выглядит следующим образом 

<div id="mySelectArea">
  <select id="myFirstOption">
    <option>1</option>
  </select>
  <select id="mySecondSelect">
    <option>2</option>
  </select>
</div>

и у вас есть событие изменения первого выбора, код будет 

$(this).next("#mySecondSelect").options(html);

в зависимости от вашего изменения, изменитеВаш javascript к этому: 

jQuery(document).ready(function() {
    $(".myFirstOption").live("change", function() {
        var firstOption = $(this);
        $.getJSON("live_getModels.cfm",{platform: $(this).val()},       
        function(j){
            var options = '';
            for (var i = 0; i < j.length; i++){
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            firstOption.next("#mySecondSelect").html(options);      
        });
    });

});

Я относительно уверен в функции успеха ajax this = window, поэтому вам нужно сохранить ссылку на исходный объект.

0 голосов
/ 07 марта 2011

Почему бы вам не попросить пользователя заполнить форму со всей информацией и добавить ее в список только в конце?

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

...