jQuery：多选单击事件不响应单击

Question

I have a multiselect box that contains a list of image urls. I am trying to enable a click event on the multiselect box: when a user clicks on a url, it should pass the url to a textarea with the id of "articleFullText". Below is my jquery code, however, it doesn't work and does not cause any error on JS console:

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

My selectbox 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 code:

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

Answer 1

Two mistakes: http://jsfiddle.net/TrueBlueAussie/dGa97/1/

A missing # selector:

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

And a missing closing quote on id="articleFullText" :

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

Answer 2

You are missin the # on the selector:

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

change to:

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

And the Id in the textarea has not a closing "" change it to:

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

DEMO

Answer 3

You didn't use the right event (change).

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

Here is a working fiddle : http://jsfiddle.net/9Ya27/1/