How to get dropdown value and show in textbox using jquery?

Question

What I want to do is get data from drop down and pass the data to textbox

here is my dropdown and textbox code

    <select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: none;">
        <option value=""></option>
        <option value="1" data-id="10">a</option>
        <option value="2" data-id="20">b</option>
        <option value="3" data-id="30">c</option>
        <option value="4" data-id="40">d</option>
        <option value="5" data-id="50">e</option>
   </select>



<div class=" control-group formSep template">
<label for="input01" class="control-label">Category Rate*:</label>
<div class="controls">
<input id="title" name="criteria_rate" size="30" type="text" class="criteria_rate span2" value=""  readonly="readonly" />
</div>
</div>

here is how to get data-id from dropdown

var criteria_id =  $(this).attr('data-id');

here is how to pass data to textbox

$('.criteria_rate').val(criteria_id);

here is my dropdown screenshot enter image description here

Any idea how to solve my problem?

Consider making a mock-up of what you have already on jsfiddle — Xotic750
– Xotic750, Commented May 17, 2013 at 2:59
Any reason for using the element's "name" rather than it's "id" for the selector? Just curious as ´name´ does not need to be unique but ´id´ does? — Xotic750
– Xotic750, Commented May 17, 2013 at 3:44

VVV · Accepted Answer · 2013-05-17 03:06:07Z

2

Here is what you need (I think)

FIDDLE

$('#chosen_a').change(function() {
    $('#title').val($('#chosen_a option:selected').data('id'));
})

answered May 17, 2013 at 3:06

VVV

7,6033 gold badges37 silver badges55 bronze badges

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

Comments

Matt · Accepted Answer · 2013-11-25 17:08:54Z

1

This is the most simple way

$(document).ready(function () {
    $("#chosen_a").change(function () {
      $('#title').val($("#chosen_a").val());


    });

});

edited Nov 25, 2013 at 17:08

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Nov 24, 2013 at 7:41

lamass

111 bronze badge

1 Comment

Hamad Over a year ago

this is not the correct way to answer,do read FAQ before answering a question.

PSL · Accepted Answer · 2013-05-17 03:05:41Z

0

Try this:-

$('#chosen_a').change(function(){
     //get the selected option's data-id value using jquery `.data()`
      var criteria_rate =  $(':selected',this).data('id'); 
     //populate the rate.
    $('.criteria_rate').val(criteria_rate);
});

Fiddle

Refer .data()

answered May 17, 2013 at 3:05

PSL

124k21 gold badges257 silver badges243 bronze badges

Comments

Xotic750 · Accepted Answer · 2013-05-17 03:18:07Z

0

Here is a possible solution, uses jquery but get the data through the event data instead of using jquery.data (notice that it is a few characters shorter doing it this way :P )

$("#chosen_a").on("change", function (evt) {
    $("#title").val(evt.target.selectedOptions[0].dataset.id);
});

Demonstrated on jsfiddle

(gave an alternative as I misread the question initially, so now I'm a little late with my correction)

edited May 17, 2013 at 3:18

answered May 17, 2013 at 3:03

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

1 Comment

VVV Over a year ago

I don't think he wants to return the val of the select box. Notice how the value and data-id are different?

Collectives™ on Stack Overflow

How to get dropdown value and show in textbox using jquery?

4 Answers 4

Comments

1 Comment

Fiddle

Refer .data()

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Refer .data()

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related