如何用jQuery实现点击下拉框后显示对应文本框的行列编号？

我看了你的代码，有几个小问题需要调整，下面是修正后的完整方案，能完美实现你想要的效果：

修正后的完整代码 #

<html> 
<body> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<table> 
  <tr> 
    <td></td> 
    <td><select id="date1" class="allDates" col="1"><option value="c">c</option><option value="b">b</option><option value="a">a</option></select></td> 
    <td><select id="date2" class="allDates" col="2"><option value="c">c</option><option value="b">b</option><option value="a">a</option></select></td> 
  </tr> 
  <tr> 
    <td><select id="name1" class="allNames" row="1"><option value="alex">alex</option><option value="daniel">daniel</option><option value="Joe">Joe</option> </select></td> 
    <td><input type="text" id="divResult" readonly="readonly" ></td> 
    <td><input type="text" id="divResult2" readonly="readonly" ></td> 
  </tr> 
  <tr> 
    <td><select id="name2" class="allNames" row="2"><option value="alex">alex</option><option value="daniel">daniel</option> </select></td> 
    <td><input type="text" id="divResult3" readonly="readonly" ></td> 
    <td><input type="text" id="divResult4" readonly="readonly" ></td> 
  </tr> 
</table> 

<script>
$(document).ready(function() { 
  // 给所有下拉框绑定change事件
  $(".allDates, .allNames").change(function () { 
    // 获取各下拉框的行列值
    var col1 = $("#date1").attr("col"); 
    var col2 = $("#date2").attr("col"); 
    var row1 = $("#name1").attr("row"); 
    var row2 = $("#name2").attr("row"); 

    // 对应更新四个文本框的内容
    $("#divResult").val(row1 + "," + col1);
    $("#divResult2").val(row1 + "," + col2);
    $("#divResult3").val(row2 + "," + col1);
    $("#divResult4").val(row2 + "," + col2);
  }); 

  // 页面加载完成后触发一次change事件，初始化文本框内容
  $(".allDates, .allNames").first().trigger("change");
}); 
</script>
</body> 
</html>

关键修改说明 #

• 给文本框添加唯一ID：你原来的第三、第四个文本框没有id，jQuery无法精准选中它们，所以我添加了divResult3和divResult4两个id。
• 修复变量重复赋值问题：你之前重复给myRow和myCol赋值，导致最终只能获取到最后一个下拉框的属性值，现在我分别定义了col1、col2、row1、row2四个变量，分别对应每个下拉框的行列值。
• 同步更新所有文本框：当任何一个下拉框变化时，同时更新四个文本框的内容，确保所有位置的行列编号都正确。
• 初始化文本框内容：页面加载完成后主动触发一次change事件，让文本框一开始就显示正确的行列编号，而不是等用户点击下拉框后才显示。

另外提个小建议：HTML里的自定义属性推荐用data-*格式（比如data-col="1"代替col="1"），这样更符合HTML5规范，获取的时候可以用$("#date1").data("col")来获取，效果一致但兼容性更好。

内容的提问来源于stack exchange，提问作者M_Lee