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

Any idea how to solve my problem?

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

Any idea how to solve my problem?

• javascript
• jquery
• textbox
• html-select

• Consider making a mock-up of what you have already on jsfiddle – Xotic750 Commented May 17, 2013 at 2:59
• do you want it to happen on change of the select box – Arun P Johny Commented May 17, 2013 at 3:03
• 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 Commented May 17, 2013 at 3:44

4 Answers 4

Here is what you need (I think)

FIDDLE

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

This is the most simple way

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


    });

});

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()

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)