Getting next closest select element with jquery

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.

`because there will be multiple with the same id` IMHO id should/must be unique. — Ajinkya, Jun 15 '12 at 12:20
do u mean for the catid? okay am sending it through as a parameter but still giving me the same issue. There is a jquery to duplicate/clone this row (tr) so it must be duplicating the id so i removed the #catid as a selector. — Shakir, Jun 15 '12 at 12:32

score 2 · Answer 1 · answered Jun 15 '12 at 12:20

2

Is this what you mean?

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

In jQuery you can use selector like $("select").next() and $("select:eq(1)")

answered Jun 15 '12 at 12:20

akalucas

476
3
13

still getting the error "Uncaught TypeError: Cannot set property 'length' of undefined " for both options. Can you help me write the code like a child – Shakir Jun 15 '12 at 12:29
Please elaborate, are you trying to select only the first next `select` element? And from which point do you start searching? – akalucas Jun 15 '12 at 12:34
there are say two rows, left side has a select box from which info is added to the next select box in the SAME row. another row has two select boxes following the same scenario (left select box fills the right select box in the same row) – Shakir Jun 15 '12 at 12:44

Martin Borthiry · Answer 2 · 2012-06-15T14:01:29.820

Try removing the inline binding and do it by 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>

this is your new 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);
        }
    });
});

Finally, those are the main changes:

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

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

In addition, I strongly recommend you to avoid eval(d). Insted use jquery.getJson

score 0 · Accepted Answer · answered Jun 15 '12 at 13:29

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

Getting next closest select element with jquery

3 Answers3

Linked