Объединение javascript и jquery для заполнения нескольких скрытых полей - плохая идея?

Я пытаюсь найти лучший способ облегчить жизнь моих учителей.

У меня есть поле выбора и список параметров, сгенерированных запросом tlist sql. К самому полю выбора уже присоединен JavaScript, который выделяет другие значения поля (значения кредита и типы кредита) в другом месте на основе идентификатора выбранной опции выбора. Это javascript, который работает для этой цели:

 <script type="text/javascript">
function changeValue(){

    var option=document.getElementById('courseno').value;
    if(option=="E100"){
            document.getElementById('credval').value="10";
            document.getElementById('credtype').value="EngFresh";
    }
        else if(option=="E200"){
            document.getElementById('credval').value="10";
            document.getElementById('credtype').value="EngSoph";
        }

}
 </script>

Мне также нужно заполнить скрытое поле, которое находится (и должно оставаться) вне тега tlist sql, который генерирует список выбора.

Вот мой SQL-код:

<select id="courseno" name="course_number" onchange="changeValue();">
<option value="">Select a Course</option>
~[tlist_sql;
     SELECT cc.course_number, cc.section_number, c.COURSE_NAME  
     FROM cc cc
     RIGHT JOIN COURSES c ON c.COURSE_NUMBER = cc.course_number
     RIGHT JOIN STUDENTS s ON cc.studentid = s.id 
     WHERE cc.studentid = ~(curstudid)
     AND TERMID = ~(curtermid)
     AND c.CreditType LIKE 'English%'
     AND NOT EXISTS (
          SELECT * FROM storedgrades sg
          WHERE sg.studentid = ~(curstudid)
          AND sg.course_number = c.course_number
                    )
     ORDER BY c.course_name;]
<option name="~(course_no)" value="~(course_no)" id="~(secno)">~(course_no).~(secno) (~(cname))</option>

        [/tlist_sql]

        </select></td>
    </tr>

И чуть ниже это скрытое поле, которое я хотел бы заполнить:

<td width="25%" class="bold">&nbsp;</td>
<td><input type="text" id="secnum" name="section_number" value=""> </td>

Я дал каждой из опций номер раздела в качестве его идентификатора, думая, что мог бы использовать элемент ID каждой из этих опций и какой-нибудь умный jquery для заполнения скрытого поля, но мне не повезло. Я только что прочитал другой вопрос, на который сообщество умело ответило, что вы не должны использовать тег идентификатора опции, который начинается с цифры... так что теперь я могу сделать?

Может ли кто-нибудь помочь мне?

Спасибо навсегда, Schelly

Источник

2 ответа

Решение

Я не думаю, что ваша проблема связана с тем, что ID - это число. Мы не видели, какой jQuery вы пробовали, но вам, скорее всего, вообще не нужен jQuery. Предполагая, что у вас работает правильно, и код PowerSchool выводит элементы так, как вы ожидаете (посмотрите исходный код в вашем браузере, чтобы убедиться, что это не работает), вы сможете получить идентификатор из выбранный параметр внутри функции changeValue, сохраните его в переменной и вставьте это значение в поле "secnum" следующим образом:

function changeValue(){
    var courseDropdown = document.getElementById('courseno');
    var selectedElement=courseDropdown.options[courseDropdown.selectedIndex];
    var option=selectedElement.value;
    var courseNo = selectedElement.getAttribute("id");
    if(option=="E100"){
        document.getElementById('credval').value="10";
        document.getElementById('credtype').value="EngFresh";
    }
    else if(option=="E200"){
        document.getElementById('credval').value="10";
        document.getElementById('credtype').value="EngSoph";
    }

   document.getElementById('secnum').value=courseNo;

}

Я изменил способ установки переменной "option", но она будет работать так же. Возможно, вы захотите переместить последнюю строку, в которой устанавливается поле "secnum", или заключите ее в "if" и т. Д.; Я не знаю ваших полных требований.

Все это говорит о том, что в этой ситуации не было бы ничего плохого в использовании jQuery, но в этом случае в этом нет необходимости, если только вам не нужна крайняя обратная совместимость с браузерами.

Источник

Рабочий пример здесь

Вы можете использовать несколько событий изменения, чтобы делать все, что вы хотите. При изменении добавьте новое событие и заполните скрытый ввод. Вы можете определить пользовательские атрибуты для любого элемента HTML с любыми данными, которые требуются для заполнения скрытого ввода

<select id="myselect">
<option>Select</option>
<option data-number="1">One</option>
<option data-number="2">Two</option>
<option data-number="3">Three</option>
<option data-number="4">Four</option>
<option data-number="5">Five</option>
</select>
<input type="hidden" id="hiddenInput"/>

$(document).ready(function(){
$('#myselect').on('change', mySelectChange);
function mySelectChange(){
    console.log('your standard change value  here');
}
$('#myselect').on('change', mySelectChange2);
function mySelectChange2(){
    var option = $("#myselect option:selected");               
    console.log(option.text());
    console.log(option.attr('data-number'));
}});
Источник
Другие вопросы по тегам