我正在使用与 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();
但他们都没有帮助我。使用 console.log() 打印时,selectedTags 总是“不可用”。
最奇怪的部分是当我尝试这个时:
var selectedTags = $('#tbpoint-tags');
console.log(selectedTags);
它还返回“不可用”,但 id 为“tbpoint-tags”的 html 元素确实存在。
任何帮助将不胜感激。