Изменение параметров выбора на основе значения предыдущего выбора с помощью JQM - PullRequest
Новая
       1

Изменение параметров выбора на основе значения предыдущего выбора с помощью JQM

1 голос
/ 16 февраля 2012

Я хочу изменить параметры во втором раскрывающемся списке выбора, основываясь на том, что я выбрал в первом раскрывающемся списке выбора. Я сделал это с обычным старым JS, но я хотел лучше сделать это в JQM.

У меня есть объект со всеми параметрами, например: 

var options = {
    blah1: ["A", "B", "C"],
    blah2: ["D", "E", "F"],
    blah3: ["G", "G", "I"]
};

У меня есть эти выбранные входы: 

<select value="firstSelect">
    <option value="blah1">Blah1</option>
    <option value="blah2">Blah2</option>
    <option value="blah3">Blah3</option>
</select>

<select value="secondSelect">
</select>

Вот то, что у меня сейчас есть в моем main.JS: 

$('#firstSelect').change(function() {
    var x= $('#secondSelect').val()
    for(index in options[x]) {
        $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
    };
});

Если в первом раскрывающемся списке выбора выбрано blah1, во втором раскрывающемся списке выбора будут указаны значения options.blah1. Затем то же самое с blah2 и blah3. Это идея, которую я пытаюсь заставить работать.

У меня была похожая версия, работающая без использования JQM, но сейчас я не могу понять это. Кто-нибудь может помочь заставить это работать?

Заранее спасибо.

РЕДАКТИРОВАТЬ: Я понял это! Мне нужно было добавить $('#secondSelect').selectmenu('refresh', true); в конце, прежде чем закрыть весь блок. Это работало, мне просто нужно было обновить второй выпадающий список, чтобы обновить его. Надеюсь, это кому-нибудь поможет.

Кстати, я не могу ответить на свой вопрос, поэтому я просто добавил эту правку. Любой желающий может ответить.

Ответы [ 2 ]

0 голосов
/ 16 февраля 2012

Хорошо, это некоторые ошибки в вашем коде ...

  1. Во-первых, ваши элементы выбора не имеют атрибута ID, вы вставляете "идентификаторы" в атрибут с именем value
  2. Во-вторых, в вашей функции javascript вы пытаетесь получить выбранное значение из select1 неверным способом ... правильная форма будет $('#firstSelect :selected').val()
  3. Последняя, ​​когда вы используете .append()метод, который вы не чистите старый HTML, поэтому вы должны использовать .html("") перед использованием .append() метод ...

Вот jsfiddle с функционаломпример.

0 голосов
/ 16 февраля 2012

В основном вы назвали много вещей неправильно.Вы использовали value вместо id в своем HTML.Вы получили val() из secondSelect вместо firstSelect.

HTML 

<select id="firstSelect">
<option value="blah1">Blah1</option>
<option value="blah2">Blah2</option>
<option value="blah3">Blah3</option>
</select>

<select id="secondSelect">
</select>​

Javascript 

var options = {
    blah1: ["A", "B", "C"],
    blah2: ["D", "E", "F"],
    blah3: ["G", "G", "I"]
};

$(function() {
    $('#firstSelect').change(function() {
        var x = $('#firstSelect').val()
        for (var index in options[x]) {
            $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
        };
    });
});​
...