将复选框的值设置为可编辑字段JavaScript

Question

请参阅此图像

我正在使用图像拾取器插件来选择图像。我在图像下面有一个空的文本区域字段。当用户单击图像时，我希望该图像的值/描述自动复制到该字段并能够编辑。

，当我单击联合国选择该图像时，下面的字段应为空。

我在某种程度上工作了。

问题

选择图像时，描述将复制到字段中。很好。但是，当我取消选择同一图像时，描述仍然存在于此。当我选择不同的图像时，与未复制的不同图像的描述。

这是我的代码。

html：图像来自数据库。

    <select class='image-picker timer-reasons' multiple="multiple" data-limit="1" name="timer-reason-selector" id="timer-reason-selector">
                <?php
                    while ($row = mysqli_fetch_assoc($timer_reasons)) {
                ?>
                    <option data-img-src='../../css/timer-reasons/<?php echo $row['image_tmr']; ?>' style="width:30%;" value='<?php echo $row['description_tmr']; ?>'><?php echo $row['description_tmr']; ?></option>
                <?php 
                     }
                    ?>
            </select>

这是单击的图像描述/值应填充的字段，还可以编辑

<textarea class="form-control" id="reason" value="" rows="2"></textarea>

我正在使用"图像票"类

javascript

这是我的JavaScript

<script>
    $(document).ready(function(){
        //Set up the imagepicker select field
    $("#timer-reason-selector").imagepicker({
        limit:1, 
        hide_select:true, 
        show_label:false,
        limit_reached:function(){           
        }
    });
    
    
        function check_enabled(){
        
        //Get the value of the selected options
        var  timer_reason  = $( "#timer-reason-selector" ).val();
        if (timer_reason !=null){
        $("#reason").text(timer_reason);
        $("#reason").attr('value', timer_reason)
        }else{
            $("#reason").text('');
            $("#reason").attr('value', '')
        }
        
    
    }
        
            //Listen for selection changes and call the check_enabled function
            $( "#timer-reason-selector" ).change(function() {
            
                check_enabled();
            });

        });
    
    
</script>

Answer 1

根据文档，您可以使用changed的CC_1事件本身：

$("#timer-reason-selector").imagepicker({
  limit:1, 
  hide_select:true, 
  show_label:false,
  limit_reached:function(){           
  },
  changed: function(select, newValues, oldValues, event) {
    // Do your stuff here
  }
});