如何获取下拉值并使用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'));
})

Answer 2

这是最简单的方式

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


    });

});

Answer 3

这是一个可能的解决方案，使用jquery但是通过事件数据获取数据而不是使用jquery.data（请注意，通过这种方式缩短几个字符：P）

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

在jsfiddle

上展示

（作为替代方案，因为我最初误读了这个问题，所以现在我的纠正有点迟了）

Answer 4

试试这个： -

$('#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

参考.data()