0

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">

2 Answers 2

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

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

7 Comments

i am calling this in document.ready and gave me this error Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'split'
@JetonR. can you post your code as well in question because it seems to work fine in jsfiddle as mentioned in my answer..!
I am using this in WordPress admin panel in option-tree plugin. Does this require anything else than jQuery ?
nope, it only requires jQuery, i dont have good knowledge of wordpress, but you could try checking if your jquery is loaded properly..!
should this also work to get the text of the selected option? In this case it gets all options not the selected one!
|
0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.