使用 jQuery，当下拉框更改时，我需要使用 Coldfusion 需要另一个输入字段答案

【问题标题】：Using jQuery, when drop down box changes, I need another input field to become required using Coldfusion使用 jQuery，当下拉框更改时，我需要使用 Coldfusion 需要另一个输入字段
【发布时间】：2011-08-09 16:34:10
【问题描述】：

我有一个表格，可以输出分配给项目的系统。系统是循环的，并且可以动态添加新行，因此使用 ID 属性不可用。

当用户更改状态下拉选项时，我需要关联的状态生效日期字段成为必填项。我不知道如何足够好地遍历 DOM 以使用 datepicker 类定位字段。

<tr>  
    <th class="form">
        <label>Status</label>
    </th>  
    <td>
        <div style="float:left;">  
        <select class='status' name="status" >  
            <option value="New">New</option>  
            <option value="Existing">Existing</option>  
            and so on...  
        </select>  
        </div>
    </td>  
    <th class="form">
        <label>Status Eff. Date</label>
    </th>  
    <td>
        <div style="float:left;">  
            <input type="text" name="statuseffective" class="datepicker" size="15" >  
        </div>
    </td>  
</tr>

如果详细说明，该过程将如下所示：
当用户更改状态时，JS 会找到包含类 .datepicker 和 addClass('required') 的下一个输入字段，并将焦点设置到该字段（设置焦点是可选的，因为 addClass'required' 会已经使该字段变为红色）。

我可以确定哪个下拉框发生了变化，但我无法进入下一个输入元素。任何帮助将不胜感激。

【问题讨论】：

解决方案需要主要适用于 IE。如果解决方案也适用于 FF，那只是一个额外的好处。公司标准是 IE。
@locrizak 甚至不让我开始！ :D

标签： jquery input find next

【解决方案1】：

$('.status').change(function(){
    $(this).next('input.datepicker').addClass("required").focus();
});

应该做的伎俩。

更新

好的...因为两者都没有相同的父级，所以您必须提升一个级别。 next 只找到直接的下一个元素，nextAll 找到所有元素（在同一个 dom 级别看起来像）。测试了一堆不同的方法并想出了这个：

$('.status').change(function(){
    $(this).parents('td').nextAll("td:first").find('.datepicker').focus()
});

这应该对你有用！

【讨论】：

这与我想出的几乎相同，但它不起作用，这只会增加我的挫败感。 :) $('.status').live("change", function() { $(this).next('.datepicker').addClass("required").focus(); });
@locrizak - 我没有在之前的评论中包含你的名字。
@dlackey 用解决方案更新了我的答案。测试了它，它对我有用。
@locarizak 父级的东西让我很困惑。我不明白一个项目何时成为父母或兄弟姐妹。我想如果我能掌握这一点，其余的对我来说会更容易掌握。由于某种原因，我似乎有精神障碍。我要去吃午饭，稍后会回来尝试您的解决方案。新鲜的眼睛和饱腹感。 :D 谢谢。

看看你提供的缩进代码，dlackey。您的 select 元素是包装它的的“子代”，而后者又是的子代（可能是的子代等）。这意味着包裹在您的选择元素周围的

是父元素。 .datepicker 元素是完全不同的

的子元素。要遍历 DOM，您需要确保正确地移动关系。除了孩子和父母，你还有“兄弟姐妹”，这应该是不言自明的。

【解决方案2】：

我们开始...对我的答案进行编辑，因为我现在看到 .datepicker 与 .status 不在同一个父级下。

$(".status").live("点击", function(){ $(this).parent().find('input.datepicker').addClass("required").focus(); )};

【讨论】：

这是一种我以前没有见过的新方法。不幸的是，它对我不起作用。
杜尔。那是因为我没有包含上面 locrizak 包含的一些逻辑......检测“.status”元素的实际变化。他/她的代码应该可以正常工作。
@steve-costello 我以前没有见过这两个班级用+号加入。你能解释一下这是做什么的吗？
根据api.jquery.com/next-adjacent-Selector，它选择下一个相邻的匹配元素。这里需要注意的是，它们仍然需要在同一个父级中。
查看我的新答案...我刚刚看到您的最新代码更改表明 .datepicker 与 .status 元素不在同一个父级中。我提供的新代码应该可以工作。