jquery - 在 div 中显示选定的选项值

Question

#example当我从选项框中选择时，我想在 div 中插入新的单选按钮。这是我的代码，但是当我选择一个值时它不起作用。我在屏幕上看不到任何东西。问题出在哪里？

<select id="keys">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<script>
  var selectedKey = $("#keys").val();
  $('#example').append('<input name='+selectedKey+' class="ace-checkbox-2" type="checkbox"><span class="lbl">'+selectedKey+'&nbsp;</span>');                            
</script>

<div id="example"></div>

Answer 1

您的脚本不会keys以任何方式处理选择更改。它应该是这样的：

$(document).ready(function(){
    $("#keys").change(function(){
        var selectedKey = $(this).val();
        $('#example').append('<input name='+selectedKey+' class="ace-checkbox-2" type="checkbox"><span class="lbl">'+selectedKey+'&nbsp;</span>');    
    });
});

Answer 2

工作演示

jQuery

 $("#keys").change(function(){
var selectedKey = $("#keys").val();
 $('#example').append('<input name=' + selectedKey + ' class="ace-checkbox-2" type="checkbox"><span class="lbl">' + selectedKey + '&nbsp;</span>');

});

但是上面的代码将复选框附加到该 div。因此，如果您只想在示例 div 中显示选定的复选框，请使用下面的一个

 $("#keys").change(function(){
var selectedKey = $("#keys").val();
 $('#example').html('<input name=' + selectedKey + ' class="ace-checkbox-2" type="checkbox"><span class="lbl">' + selectedKey + '&nbsp;</span>');

 });

工作演示