Question

我正在与使用Select2插件的Yii2和Kartik DepDrop合作。我想要的是使用jQuery或纯JavaScript获取select2插件的所有选定值（因为它是多选）。

这是我的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'])
        ]
    ]);

这就是html在网页中的样子：

     <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>

我已按照其他几个页面，论坛和stackoverflow问题的说明进行操作..我在我的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();

但他们都没有帮助过我。 selectedTags总是来自＆＃34;不可用＆＃34;使用console.log（）打印时。

最奇怪的是，当我尝试这个时：

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

它也会返回＆＃34;不可用＆＃34;但是带有id＆＃34; tbpoint-tags＆＃34;的html元素确实存在。

非常感谢任何帮助。

Answer 1

表格：

'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]
 ]);
]
]);'

Firefox中的F12：

'<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();'

使用Select2插件从DepDrop获取选定值使用jQuery

1 个答案: