组合 javascript 和 jquery 来填充多个隐藏字段 - 坏主意？

Question

我正在努力寻找让我的老师的生活更轻松的最佳方法。

我有一个 select 字段和由 tlist sql 查询生成的选项列表。 select 字段本身已经附加了一个 javascript，它根据所选 select 选项的 ID 在其他地方充实其他字段值（信用值和信用类型）。这是用于此目的的 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>

我还需要填充一个隐藏字段（并且必须保留）在生成 select 列表的 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，认为我可以使用每个选项的 ID 元素和一些聪明的 jquery 来填充隐藏字段，但我没有运气。我刚刚读到社区巧妙回答的另一个问题，您不应该使用以数字开头的选项 ID 标签...那么现在我能做什么？

有人可以帮我吗？

永远感谢，雪莉

Answer 1

Working Example Here

您可以使用多个 on change 事件来做任何您想做的事情。在更改时添加一个新事件并填充隐藏的输入。您可以使用填充隐藏输入

所需的任何数据为任何 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'));
}});

Answer 2

我认为您的问题不是因为 ID 是数字。我们还没有看到您 jQuery 尝试过什么，但您很可能根本不需要 jQuery。假设您所拥有的工作正常，并且 PowerSchool 代码按照您期望的方式输出元素（请在浏览器中查看源代码以确保，如果这不起作用），您应该能够从中获取 ID在您的 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 没有任何问题，但在这种情况下没有必要，除非您需要极端的向后浏览器兼容性。

组合 javascript 和 jquery 来填充多个隐藏字段 - 坏主意？

Combining javascript and jquery to fill multiple hidden fields - bad idea?

javascript

jquery

html

sql

powerschool