jQuery：多选点击事件不响应点击答案

【问题标题】：jQuery: multiselect click event doesn't respond to clickjQuery：多选点击事件不响应点击
【发布时间】：2023-03-11 19:24:01
【问题描述】：

我有一个包含图片网址列表的多选框。我正在尝试在多选框上启用单击事件：当用户单击 url 时，它应该将 url 传递给 id 为“articleFullText”的文本区域。下面是我的 jquery 代码，但是，它不起作用并且不会在 JS 控制台上导致任何错误：

$('.multiselect').click(function() {
                    var src = $(this).val();
                    $('#articleFullText').val($('articleFullText').val() + src);
                });

我的选择框 html：

<div class="controls">
                            <select name="images" class="multiselect" multiple="multiple">

                             <option value="http://localhost/images/1.jpg">http://localhost/images/1.jpg</option>
<option value="http://localhost/images/2.jpg">http://localhost/images/2.jpg</option>

                            </select>
                        </div>

文本区号：

<textarea class="form-control" rows="3" name="articleFullText" id="articleFullText></textarea>

【问题讨论】：

标签： jquery select click textarea

【解决方案1】：

两个错误：http://jsfiddle.net/TrueBlueAussie/dGa97/1/

缺少的 # 选择器：

$('.multiselect').click(function () {
    var src = $(this).val() +"blah";
    $('#articleFullText').val($('#articleFullText').val() + src);
});

id="articleFullText" 上缺少结束语：

<textarea class="form-control" rows="3" name="articleFullText" id="articleFullText"></textarea>

【讨论】：

【解决方案2】：

您没有使用正确的事件（更改）。

$('.multiselect').on('change', function() {
  $('#articleFullText').append($(this).val())
});

这是一个有效的小提琴：http://jsfiddle.net/9Ya27/1/

【讨论】：

Click 工作正常。这是一种替代方法，可以避免一些问题，但不能解决实际问题:)，

【解决方案3】：

你错过了选择器上的#：

$('#articleFullText').val($('articleFullText').val() + src);

改为：

$('#articleFullText').val($('#articleFullText').val() + src);

并且textarea中的Id没有结束""改成：

<textarea class="form-control" rows="3" name="articleFullText" id="articleFullText"></textarea>

DEMO

【讨论】：