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

Question

See this image

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

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

我已经让它在某种程度上起作用了。

问题

当我选择图像时，描述会被复制到该字段中。这很好。但是当我取消选择同一张图片时，描述仍然存在。当我选择不同的图像时，不同图像的描述不会被复制。

这是我的代码。

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

根据文档，您可以像这样使用imagepicker 本身的changed 事件：

$("#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
  }
});