使用 jquery 获取下一个最接近的选择元素答案

【问题标题】：Getting next closest select element with jquery使用 jquery 获取下一个最接近的选择元素
【发布时间】：2012-06-15 22:01:29
【问题描述】：

我想获取下一个选择元素（因为会有多个相同的id），这里是代码

function fillProds(catid) {
    $.get("http://localhost/crops/?module=from-receipt&action=getproducts&format=json&catid="+catid , null,function(d){
        CC = eval(d);
        t = $(this).find('select');
        alert(t);
        t.options.length=0;
        t.options[0]=new Option("","");
        for(i=0;i<CC.length;i++) {
            t.options[i+1]=new Option(CC[i].name,CC[i].id);
        }
    });
}

对于 html 部分

<tr>
                <td class="first" width="172">
                    <select onchange="fillProds(this.value)" id="catid">
                        <option></option>
                        <?php foreach ( $cats as $v => $r ) { ?>
                            <option value="<?=$r['id']?>"><?=$r['name']?></option>';
                        <?php } ?>
                    </select>
                <td>
                    <input type="hidden" name="transindetid[]" value="" />
                    <select name="transindet[prodid][]" id="prods" class="validate-not-first">
                        <option></option>
                    </select>
                </td>
                <td class="last">
                    <input type="text" name="transindet[qty][]" class="required" value=""> &nbsp;
                    <a href="#" class="delRow" style="color:red">x</a>
                </td>
</tr>

所以问题是我收到设置长度未定义之类的错误，可能是因为我没有正确获取选择元素。对上述内容进行任何更正，以便我可以使其正常工作并选择下一个选择元素？

谢谢。

【问题讨论】：

because there will be multiple with the same id 恕我直言 id 应该/必须是唯一的。
@Ajinkya 在你看来不是。 ID 必须是唯一的。
你是说catid吗？好的，我将它作为参数发送，但仍然给我同样的问题。有一个 jquery 可以复制/克隆这一行（tr），所以它必须复制 id，所以我删除了 #catid 作为选择器。

标签： jquery

【解决方案1】：

这是你的意思吗？

http://api.jquery.com/eq-selector/

在 jQuery 中，您可以使用 $("select").next() 和 $("select:eq(1)") 等选择器

【讨论】：

对于这两个选项仍然收到错误“未捕获的类型错误：无法设置未定义的属性'长度'”。你能像孩子一样帮我写代码吗
请详细说明，您是否尝试仅选择第一个下一个select 元素？你从什么时候开始搜索？
有两行，左侧有一个选择框，从中将信息添加到同一行中的下一个选择框。另一行有两个选择框遵循相同的场景（左选择框填充同一行中的右选择框）

【解决方案2】：

好的，我有办法

function fillProds(catid,obj) {
    $.get("http://localhost/crops/?module=from-receipt&action=getproducts&format=json&catid="+catid , null,function(d){
        CC = eval(d);
        trs = $(obj).closest('tr');
        t = trs.find('#prods').get(0);
        t.options.length = 0;
        t.options[0]=new Option("","");
        for(i=0;i<CC.length;i++) {
            t.options[i+1]=new Option(CC[i].name,CC[i].id);
        }
    });
}

<tr>
                <td class="first" width="172">
                    <select onchange="fillProds(this.value,this)" id="catid">
                        <option></option>
                        <?php foreach ( $cats as $v => $r ) { ?>
                            <option value="<?=$r['id']?>"><?=$r['name']?></option>';
                        <?php } ?>
                    </select>
                <td id="select">
                    <input type="hidden" name="transindetid[]" value="" />
                    <select name="transindet[prodid][]" id="prods" class="validate-not-first">
                        <option></option>
                    </select>
                </td>
                <td class="last">
                    <input type="text" name="transindet[qty][]" class="required" value=""> &nbsp;
                    <a href="#" class="delRow" style="color:red">x</a>
                </td>
</tr>

所以目前它正在寻找最近的 tr 并获取具有 id prods 的第一个元素（我认为）

【讨论】：

【解决方案3】：

尝试删除内联 binding 并通过 jquery 来完成。

<td class="first" width="172">
                <select class="s-parent" id="catid">
                    <option></option>
                    <?php foreach ( $cats as $v => $r ) { ?>
                        <option value="<?=$r['id']?>"><?=$r['name']?></option>';
                    <?php } ?>
                </select>
            <td>
                <input type="hidden" name="transindetid[]" value="" />
                <select name="transindet[prodid][]" id="prods" class="validate-not-first">
                    <option></option>
                </select>
            </td>
            <td class="last">
                <input type="text" name="transindet[qty][]" class="required" value=""> &nbsp;
                <a href="#" class="delRow" style="color:red">x</a>
            </td>

这是你的新 js：

 $('.s-parent').on('change',function() {
    var $el =$(this),
    catid = $el.val();

    $.get("http://localhost/crops/?module=from-receipt&action=getproducts&format=json&catid="+catid , null,function(d){
        CC = eval(d);
        t = $('select',$el.closest('tr')).eq(1); //the second select in the same tr
        alert(t);
        t.options.length=0;
        t.options[0]=new Option("","");
        for(i=0;i<CC.length;i++) {
            t.options[i+1]=new Option(CC[i].name,CC[i].id);
        }
    });
});

最后，这些是主要变化：

 var $el =$(this),
        catid = $el.val();

t = $('select',$el.closest('tr')).eq(1); //the second select in the same tr

此外，我强烈建议您避免使用 eval(d)。安装使用jquery.getJson

【讨论】：