CODEWITHSUNDEEP
jquery
Hulk
Hulk

Reputation: 34200

jquery find closest element with a known sibling

In the following html code ..I have the drop down boxes selected by a value..Now i want to populate the input box next to it..

I use the following code to do it..But how to populate the corresponding text boxes..

var ty =$(".edata");
$(ty).children().find(".kt").html('').append('//Appending values to drop down');
for(var item in key_val_pair)
{
    $(ty).children().find(".kt").removeAttr('selected')
    $(ty).children().find(".kt option:eq("+item+")").prop('selected',true);                 
    $(ty).children().find(".kt option:eq("+item+")").closest('.e_val').val(key_val_pair[item])
}

EDIT:

 Lets say key_val_pair="{\"1\":\"123\",\"4\":\"456\"}"

HTML

<div class="edata">
    <span class="b1">
        <select class="kt">
            <option value="1">k1</option>
            <option value="2" >k2</option>
        </select>
        <input type="text" placeholder="val" class="e_val"/>
    </span>
    <span class="b1">
        <select class="kt">
            <option value="3">k3</option>
            <option value="4" >k4</option>
        </select>
        <input type="text" placeholder="val" class="e_val"/>
    </span>
</div>

Upvotes: 0

Views: 286

Answers (3)

Brian Stephens
Brian Stephens

Reputation: 5271

Your problem is with this line:

$(ty).children().find(".kt option:eq("+item+")").closest('.e_val').val(key_val_pair[item])

closest() finds ancestors only, so you are telling it to find an ancestor with class 'e_val' of the option. You really want

$(ty).children().find(".kt option:eq("+item+")").parent().siblings('.e_val').val(key_val_pair[item])

to go up to the (the parent), then to its associated sibling with class 'e_val'.

Upvotes: 0

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

$(ty).children().find(".kt").next('input').val('you value');

Upvotes: 0

MackieeE
MackieeE

Reputation: 11872

This is considering you wish to populate the nearest Inputbox with the option picked from the dropdown:

<script>
     key_val_pair = { 
            "1" : "123",
            "2" : "321",
            "3" : "999",
            "4" : "456" };

     $('.kt').on('change', function() {
         $(this).siblings('.e_val')
                .val( key_val_pair[ $(this).find('option:selected').val() ] );
     });
</script>

Fiddle: http://jsfiddle.net/3Dtzb/2/

Upvotes: 1

Related Questions