依赖下拉菜单在while循环内不工作

本文介绍了依赖下拉菜单在while循环内不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 echo "<select name = error_type id='error_type$rowIndex' name='error_type$rowIndex' class='error_type'> <option value= >Select Type</option> <option value=Category1>Category1</option> <option value=Category2>Category2</option> </select> </td><td> <select disabled=disabled id='remarks$rowIndex' name='remarks$rowIndex' class='remarks'> <option value= >Select Subtype </option> <option rel='Category1' value='Subcategory1.1'>Subcategory1.1</option> <option rel='Category1' value='Subcategory1.2'>Subcategory1.2</option> <option rel='Category1' value='Subcategory1.3'>Subcategory1.3</option> <option rel='Category2' value='Subcategory2.1'>Subcategory2.1</option> <option rel='Category2' value='Subcategory2.2'>Subcategory2.2</option> <option rel='Category2' value='Subcategory2.3'>Subcategory2.3</option> </select>";我有一个php表格输出'n'上面的代码段只能用于Php表的第一行，但是当下一行发生变化时，第一行的子类别也会发生变化。如何使各行独立行为。 I have a php table which outputs 'n' number of rows,each row with 2 dropdowns. The above section of code works only for the first row of the Php table, but when the next row is changed, the first row's subcategory also changes.How do i make individual rows act independently. js是， the js is, $(function(){ var $error_type = $(".error_type"), $remarks = $(".remarks"); $error_type.on("change",function(){ var _rel = $(this).val(); $remarks.find("option").attr("style",""); $remarks.val(""); if(!_rel) return $remarks.prop("disabled",true); $remarks.find("[rel="+_rel+"]").show(); $remarks.prop("disabled",false); });}); cs是， The cs is,.remarks option{ display:none;}.remarks option.label{ display:block;} - 编辑 - --EDIT--$(function(){ var $error_type = $(".error_type"), $remarks = $(".remarks"); $error_type.on("change",function(){ var $remarks = $(this).closest("tr").find(".remarks"); var _rel = $(this).val(); $remarks.find("option").attr("style",""); $remarks.val(""); if(!_rel) return $remarks.prop("disabled",true); $remarks.find("[rel="+_rel+"]").show(); $remarks.prop("disabled",false); });}); 推荐答案这将解析为 / em>匹配元素： This is going to resolve to all matching elements:$remarks = $(".remarks");当页面加载完成后，您总是在所有这些元素。相反，请完全删除该行，并在发生事件时查找您要查找的特定元素，并以事件源为出发点。You're doing that once when the page loads and then always operating on all of those elements. Instead, remove that line completely and find the specific element you're looking for when the event happens, using the source of the event as a starting point.也许类似这： Perhaps something like this:$error_type.on("change", function(){ var $remarks = $(this).closest("tr").find(".remarks"); // the rest of your handler code});这个想法是，当改变事件发生，你从这个（它是触发该事件的元素）开始，将DOM遍历到一个公共父元素（给定的HTML可能是< tr> ），然后找到特定目标 .remarks 元素（s），专门包含在该父级中。The idea is that when the change event happens, you start from this (which is the element that triggered the event), traverse the DOM to a common parent element (given your HTML that's likely a <tr>), then finds the specific target .remarks element(s) contained specifically within that parent. 这篇关于依赖下拉菜单在while循环内不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！