javascript - Jquery - Fill an input text when select option - Stack Overflow

admin管理员组

文章数量:1289390

I have this form's elements:

<form ...>
    <select name="type[]" id="type[]">
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    <input type="text" name="tvalue[]" id="tvalue[]" />

    <select name="type[]" id="type[]">
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    <input type="text" name="tvalue[]" id="tvalue[]" />
    ...

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

so, I need fill the input text element when select option element change. (array of elements?) can anybody help me, please?

The markup above is result of this PHP script (I changed the markup above):

<?php
echo "<form name='form1' id='form1' action=\"#\" method='post'>";
for ($i=0; $i<5; $i++){
echo "<select name='type[]' id='type[]'>\n";
echo "<option value ='1'>One</option>\n";
echo "<option value ='2'>Two</option>\n";
echo "</select>\n";
echo "<input type='text' name='tvalue[]' id='tvalue[]' value=''>";
}
echo "<input type='submit' name='submit' id='submit' value='enviar' />";
echo "</form>";
?>

(type[] and tvalue[] because of I ned post this an array)

The problem is that I need fill the input text when I select option. For example, when I select option "One" in the first select, then the first input text must show "One", and so when I select an option in the second select, and the third, and so... So when I submit the form I can get this values.

Thanks you very much! Carlos.

I have this form's elements:

<form ...>
    <select name="type[]" id="type[]">
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    <input type="text" name="tvalue[]" id="tvalue[]" />

    <select name="type[]" id="type[]">
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    <input type="text" name="tvalue[]" id="tvalue[]" />
    ...

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

so, I need fill the input text element when select option element change. (array of elements?) can anybody help me, please?

The markup above is result of this PHP script (I changed the markup above):

<?php
echo "<form name='form1' id='form1' action=\"#\" method='post'>";
for ($i=0; $i<5; $i++){
echo "<select name='type[]' id='type[]'>\n";
echo "<option value ='1'>One</option>\n";
echo "<option value ='2'>Two</option>\n";
echo "</select>\n";
echo "<input type='text' name='tvalue[]' id='tvalue[]' value=''>";
}
echo "<input type='submit' name='submit' id='submit' value='enviar' />";
echo "</form>";
?>

(type[] and tvalue[] because of I ned post this an array)

The problem is that I need fill the input text when I select option. For example, when I select option "One" in the first select, then the first input text must show "One", and so when I select an option in the second select, and the third, and so... So when I submit the form I can get this values.

Thanks you very much! Carlos.

• javascript
• jquery
• arrays
• forms

Share Improve this question Follow edited Jun 20, 2011 at 1:18 Carlos asked Jun 19, 2011 at 23:49 CarlosCarlos 1111 gold badge11 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I write down the example in the case of only one select and one input to modify

$('select#id1').change(function(){ //the event here is change
    if ($(this).val() === "1" ) //check the value into the select
    {
        $('input#id2').val("ONE!"); //change the value into the input
    }
    else
    {
        $('input#id2').val("TWO!"); //change the value into the input
    }
});

1 - Remove dupe IDs they are not valid.

2 - Assuming your markup is exactly what you posted, give or take more selects and corresponding textboxes, and no elements in between:

$("select[name='type[]']").change(function() {
    $("input[name='tvalue[]']").eq($(this).index()).val(this.value);
}).change(); // set initial textbox value on page load

Demo: http://jsfiddle/NPeJL/2/

本文标签： javascriptJqueryFill an input text when select optionStack Overflow