Jquery selects and inputs texts

Question

I have this form:

<form ...>
<select name="fuits[]" id="fruits[]">
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>   
</select>
<input type="text" name="fruit[]" id="fruit[]" />

<select name="fruits[]" id="fruits[]">
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>   
</select>
<input type="text" name="fruit[]" id="fruit[]" />

<select name="fruits[]" id="fruits[]">
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>   
</select>
<input type="text" name="fruit[]" id="fruit[]" />

...

<input type="submit" value="send" />

So, I need fill each input text from each select option values (match input text with the selected option)

I have this JQuery, but it doesn't work fine =(,

$("select[name='type[]']").change(function() {
    $("input[name='tvalue[]']").eq($(this).index()).val(this.value);
}).change();

Here is the DEMO (thanks to karim79): http://jsfiddle.net/GKrd9/4/ suggestions please?

Thanks! Carlos

kapa · Accepted Answer · 2011-06-20 16:29:51Z

3

I'v edited your fiddle, hope this is what you want.

$("select[name='type[]']").change(function() {
    $(this).next().val(this.value);
}).change();

http://jsfiddle.net/GKrd9/5/

edited Jun 20, 2011 at 16:29

kapa

78.9k21 gold badges166 silver badges178 bronze badges

answered Jun 20, 2011 at 16:27

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sylvain · Accepted Answer · 2011-06-20 16:35:08Z

0

The only thing missing in your code is a selector in index().

This fixes your problem :

$("select[name='type[]']").change(function() {
    $("input[name='tvalue[]']").eq($(this).index("select")).val(this.value);
}).change();

jsFiddle example

answered Jun 20, 2011 at 16:35

Sylvain

3,8731 gold badge30 silver badges32 bronze badges

Comments

FishBasketGordo · Accepted Answer · 2011-06-20 16:36:31Z

0

Try this:

$(function() {
    $("select").change(function() {
        var jqThis = $(this);
        jqThis
            .next('input')
            .val(jqThis.find('option:selected').val())
    }).change();
});

Here's a jsfiddle: http://jsfiddle.net/HPYxy/

answered Jun 20, 2011 at 16:36

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Collectives™ on Stack Overflow

Jquery selects and inputs texts

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related