jQuery on change选择字段填充输入文本字段

Question

I want to take the value from each select field either by name selector or id and input that value into input text field again either by name selector or id.

Note the 0 at the end of id that can go from 0 to ++ number count up. I want the value of this select field to be input in the input text field on value change.

<select name="option_tree[orn_category_background][0][orn_cat_bg_select]" id="orn_category_background_orn_cat_bg_select_0" class="option-tree-ui-select ">

<input type="text" name="option_tree[orn_category_background][0][title]" id="orn_category_background_title_0" value="VALUE FROM SELECT HERE" class="widefat option-tree-ui-input option-tree-setting-title">

Answer 1

you could use jQuery selector, like, do:

$("select[id^='orn_category_background_orn_cat_bg_select_']").change(function() {
   var $this = $(this), 
    idNum = $.attr("id").split("_").pop(); //get the last num 0, 1, etc
   $("input[id='orn_category_background_title_"+idNum+"']").val($this.val());
});

Demo:: jsFiddle

Answer 2

Here is a simple method that you can tailor to your needs.

HTML Part

<select name="option_tree[orn_category_background][0][orn_cat_bg_select]" id="orn_category_background_orn_cat_bg_select_0" class="option-tree-ui-select getOption">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="text" name="option_tree[orn_category_background][0][title]" id="orn_category_background_title_0" class="widefat option-tree-ui-input option-tree-setting-title returnValue">

jQuery Part

$('.getOption').change(function () {
   $( "select option:selected" ).each(function() {
         $('.returnValue').val($( this ).text());
    });

});

Remember to add the new classes to your html elements.