javascript - 如何使用jquery获取下拉值并在文本框中显示？

Question

我想要做的是从下拉列表中获取数据并将数据传递到文本框

这是我的下拉菜单和文本框代码

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

这是如何从下拉列表中获取数据ID

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

这是如何将数据传递到文本框

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

这是我的下拉屏幕截图

知道如何解决我的问题吗？

Answer 1

这就是你需要的(我认为)

FIDDLE

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