jQuery on change選擇字段填充輸入文本字段

Question

我想通過名稱選擇器或id從每個選擇字段中獲取值，然后通過名稱選擇器或id將值再次輸入到輸入文本字段中。

請注意，id末尾的0可以從0到++數字遞增。 我希望此選擇字段的值在值更改時輸入到輸入文本字段中。

<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

您可以使用jQuery選擇器，例如：

$("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());
});

演示：： jsFiddle

Answer 2

這是一個簡單的方法，您可以根據需要進行調整。

HTML部分

<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部分

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

});

請記住將新類添加到html元素中。