Question

我正在使用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

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

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

将checkbox的值设置为可编辑字段Javascript

1 个答案: