Question

I want to get the next select element (because there will be multiple with the same id) and here is the code

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);
        }
    });
}

and for the html part

<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>

So the issue is I get errors like setting length of undefined probably because I am not getting the select element correctly.
Any correction for the above so that I can make it work correctly and pick the next select element?

Thank you.

Answer 1

okay i got a solution

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>

so at the moment its looking for the nearest tr and getting the FIRST element (i think) that has the id prods