Формы: Jquery: несколько опций, обновляющих зависимое скрытое поле с несколькими соответствующими значениями - PullRequest
Новая
       25

Формы: Jquery: несколько опций, обновляющих зависимое скрытое поле с несколькими соответствующими значениями

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

Я не могу полностью разобраться с этой идеей, интересно, кто-нибудь может помочь, пожалуйста?

У меня есть форма с 12 опциями, по умолчанию выбрана опция '1'. Есть скрытое поле, которое заполняется соответствующими значениями.

Чего я хочу добиться: при выборе опции 1 значение скрытого текстового поля обновляется до «Opt1» и так далее до «Opt12»

Я надеюсь, что следующий текст корректно отображается как XHTML

Лучший способ объяснить мне, если можно, заключается в следующем 

    <select name="somethingName" id="SomethingID">
<option value="1" selected="selected">Option #1</option>
<option value="2ABC">Option #2</option>
<option value="3ABC">Option #3</option>
<option value="4ABC">Option #4</option>
<option value="5ABC">Option #5</option>
<option value="6ABC">Option #6</option>
<option value="7ABC">Option #7</option>
<option value="8ABC">Option #8</option>
<option value="9ABC">Option #9</option>
<option value="10ABC">Option #10</option>
<option value="11ABC">Option #11</option>
<option value="12ABC">Option #12</option>
</select>

<input type='hidden' id='myhidden' value=''>

Если / когда выбрана опция № 1, значение myHidden равно «Opt1» Если / когда выбрана опция # 2, значение myHidden равно «Opt2»

и так далее. Я говорю если / когда за идею, что скрытое текстовое поле обновляется при выборе.

Может кто-нибудь подсказать, как мне этого добиться с помощью Jquery?

1 Ответ

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

Вот как вы можете это сделать:

  1. Привязать событие изменения элемента select с помощью .change (обработчик) .«Обработчик» - это функция, которая будет вызываться при возникновении события изменения.

  2. Получить выбранный элемент опции с помощью селектора : selected .

  3. при использовании .index () без параметра возвращает индекс соответствующего элемента относительно его родственных элементов.Таким образом, когда вы получаете выбранный элемент option, он будет возвращать свой индекс относительно других элементов option.Это подразумевает, конечно, ваши варианты отсортированы.возвращаемый индекс начинается с нуля.

  4. Установите значение скрытого поля с помощью .val () .

  5. Чтобы напрямую применить изменение, когда параметр предварительно выбран, запустите событие изменения с помощью .change () (без параметров).

Вот код: 

var $select = $('#SomethingID'),
    $hidden = $('#myhidden');

$select.change(function(e) {
    var idx = $select.find('option:selected').index() + 1;
    $hidden.va('Opt' + idx);
}).change();​

DEMO

Таким образом, если фактическое значение для установки в скрытом поле не основано на индексе элемента option, но случайное значение, лучший выбор - использовать атрибут данных.Таким образом, вы можете сохранить соответствующее значение для установки каждого элемента option: 

<select name="somethingName" id="SomethingID">
    <option value="1" data-val="QBQ" selected="selected">Option #1</option>
    <option value="2ABC" data-val="ALA">Option #2</option>
    <option value="3ABC" data-val="OLP">Option #3</option>
</select>

Чтобы получить значение атрибута данных, используйте метод .data () : 

var $select = $('#SomethingID'),
    $hidden = $('#myhidden');

$select.change(function(e) {
    var val = $select.find('option:selected').data('val');
    $hidden.va(val);
}).change();​

DEMO

...