Get selected Values From DepDrop Using Select2 Plugin With jQuery

Question

I am working with Yii2 and Kartik DepDrop which I am using with a Select2 Plugin. What I want is to get all the selected values (since it is a Multi Select) of the select2 Plugin using jQuery or plain JavaScript.

Here is my DepDrop:

echo $form->field($model, 'tags')->widget(DepDrop::classname(), [
        'data' => $listTag,
        'type' => DepDrop::TYPE_SELECT2,
        'options' => ['multiple' => true,'id'=>'tbpoint-tags'],
        'select2Options'=>['options' => ['multiple' => true],'pluginOptions'=>['allowClear'=>true]],
        'pluginOptions'=>[
            'depends'=>['tbpoint-categoria','tbpoint-sub_categoria'],
            'placeholder'=>'Select...',
            'url'=>Url::to(['/site/deptag'])
        ]
    ]);

This is how the html looks like in the webpage:

     <div class="form-group field-tbpoint-tags">
    <label class="control-label col-sm-3" for="tbpoint-tags">Tags</label>
    <div class="col-sm-9">
    <span id="parent-s2-togall-tbpoint-tags" style="display:none"></span><input name="TbPoint[tags]" value="" type="hidden">

<select id="tbpoint-tags" class="form-control select2-hidden-accessible" name="TbPoint[tags][]" multiple="" size="4" data-krajee-depdrop="depdrop_bfb7e005" data-s2-options="s2options_c4acac00" data-krajee-select2="select2_c7fb3810" style="display:none" tabindex="-1" aria-hidden="true"><option value="">Select...</option><option value="7">Tag 1</option><option value="5">Tag 1-1</option>
</select>

<span class="select2 select2-container select2-container--krajee select2-container--above select2-container--focus" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><span class="select2-selection__clear">×</span><li class="select2-selection__choice" title="Tag 1"><span class="select2-selection__choice__remove" role="presentation">×</span>Tag 1</li><li class="select2-selection__choice" title="Tag 1-1"><span class="select2-selection__choice__remove" role="presentation">×</span>Tag 1-1</li><li class="select2-search select2-search--inline"><input class="select2-search__field" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;" type="search"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

    <div class="help-block"></div>
    </div>
    </div>

I have follow the instructions in several other pages, forums and stackoverflow questions.. And I have tryed the following in my javascript:

1. var selectedTags = $('#tbpoint-tags').select2().val();
2. var selectedTags = $('#tbpoint-tags').select2('val');
3. var selectedTags = $('#tbpoint-tags').select2('data');
4. var selectedTags = $('#tbpoint-tags').val();

But none of them have helped me. The selectedTags always come as "unavailable" when printed using console.log().

The most weird part is that when I try this:

var selectedTags = $('#tbpoint-tags');
console.log(selectedTags);

it also returns "unavailable" but the html element with id "tbpoint-tags" does exist.

Any help would be very appreciated.

Thank you for your comment, but i tryed that and it is not working for me ): — ManuelCash, Nov 30 '17 at 21:14

score -1 · Answer 1 · edited Aug 15 '18 at 23:25

Form:

'echo $form->field($model, 'id_beneficiario')->widget(DepDrop::classname(), [
'options'=>['id'=>'beneficiario-id', 'style'=>'width:300px;'],
'type'=>DepDrop::TYPE_DEFAULT,
'pluginOptions'=>[
    'depends'=>['cliente-id','producto-id'],
    'placeholder'=>'Seleccione el Beneficiario',
    'url'=>Url::to(['/xxx/yyy/zzz]
 ]);
]
]);'

F12 in Firefox:

'<select
id="beneficiario-id" 
class="form-control" name="xxxxx" 
style="width:300px;" 
data-krajee-depdrop="depdrop_c24f0747" aria-invalid="false">
    <option value="">Seleccione el ..</option>
    <option value="51">A</option>
    <option value="53">c</option>
    <option value="52">b</option>
    <option value="206">d</option>
</select>'

JavaScript:

'var vIntBeneficiario = $("#beneficiario-id").val();'

Get selected Values From DepDrop Using Select2 Plugin With jQuery

1 Answers1