javascript中的表单元素索引，用于jquery.change函数

form element index in javascript for use in jquery .change function

本文关键字：用于 jquery change 函数 索引 表单 元素 javascript      更新时间：2023-09-26

我需要获得一个表单元素的索引，该索引被传递到.change语句中。

示例HTML表单代码

<tr><td>Question1</td><td><select class=list1 id=l[1] name=l[1]><option value=1>1<option value=2> 2 <option value=3> 3 </select></td><td><select class=hideme name=x[1] id=x[1]></select></td></tr>
<tr><td>Question2</td><td><select class=list1 id=l[1] name=l[2]><option value=1>1<option value=2> 2 <option value=3> 3 </select></td><td><select class=hideme name=x[2] id=x[2]></select></td></tr>
<tr><td>Question3</td><td><select class=list1 id=l[3] name=l[3]><option value=1>1<option value=2> 2 <option value=3> 3 </select></td><td><select class=hideme name=x[3] id=x[3]></select></td></tr>

现在，用户将从第一次下拉中选择1、2或3。基于该选择，第二下拉菜单将加载内容。

示例javascipt jquery函数

$('.list1').change (function ()
 {
  // here is where I need to pick up the index ie: the [1] [2] or [3] as var id
  var selected = $("#l[id] option:selected");
  var pdata = 'subjectareaid='+selected.val();
  $.ajax({
    type   : "POST",
    cache  : false,
    url    : "subcat.php",
    data   : pdata,
    success: function(data) {
     $('#x[id]').html(data);
     $('#x[id]').removeClass('hideme');
    }
   });
 });

这将允许我使用ajax调用根据第一次下拉中的选择返回的选项填充第二次下拉。

该表有54个下拉列表，所有下拉列表都必须对它们采取此操作（这是为了在表单提交时填充mysql表）下拉列表是（l[id]）主类别（x[id]]）子类别。子类别选择将隐藏，直到拾取主类别，然后填充select语句。

首先，在属性"周围添加双qoute，这是最佳做法，如果在值中使用空格，可以防止错误。还要确保你的html是有效的。您没有用</option>关闭<option>标记。

您可以使用一个简单的正则表达式来获取select元素的索引。

$('.list1').change (function () {
    var id = $(this).attr('id');
    var matches = id.match(/^l'[([0-9]{1,})']/);
    if (matches) {
        var index = matches[1];
    }
});

您可以使用$(this)而不是var selected = $("#l[id] option:selected"); 来更改select元素

您可以通过使用jQuery的closest（）选择器来达到该select元素的父tr元素的索引，从而达到更改select的索引。

最后，你需要的代码块应该是这样的：

  var selected = $(this);
  var selectedIndex = selected.closest("tr").index();     
  var pdata = 'subjectareaid='+selected.val()+"&index="+selectedIndex;
相关文章：