jQuery select box onchange event

Question

I have a code like this

$(function() {
    $('#book_id').change(function(){
        $('#book_code').show();
        var get_value = $(this).val();
        $( "#book_code" ).html( get_value );
    });
});



<td>
    <select id="book_id" name="book_name" class="form-control">
    <option value="">Select Book</option>
    <?php while($row=mysql_fetch_array($book_query)){?>
        <option value="<?php  echo $row['book_code'];?>">
        <?php  echo $row['book_name']; ?>
        </option>
        <?php  }?>
    </select>
</td>
<td>
    <div id="book_code">
        <input type="text" class="form-control" value="" disabled="disabled" placeholder="Book Code" />
    </div>
</td>

What i want to do is On each select event, i need to show the book code inside a input text box (not editable)

The above code works but doesn't show the value inside the input box

How can I do that?

In other words, on each select event display the book code inside a text box

Thanks, Kimz

Answer 1

You may try this (Working Example) :

$(function() {
   $('#book_id').on('change', function(){
       $('#book_code').find('input').val($(this).val());
   });
});

Answer 2

You have to pass the class of input as well

 $(function() {
                $('#book_id').change(function(){
                var get_value = $(this).val();
                $( "#book_code .form-control"  ).val( get_value );
                });
            });