选择2 - 使用事件mouseenter获取值

Question

我正在使用带有5个Select2的optgroup如何通过将事件mouseenter悬停在每个项目上来获得“价值”（id）？

$('body').on("mouseenter", ".select2-results__option", function(e){
    console.log(value);
});

我正在使用Select2和Kartik for Yii2 Framework。

 <?= $form->field($model, 'id_nconform')->widget(Select2::classname(), [
            'data' => $variables,
            'options' => ['placeholder' => 'Select a state ...'],
            'pluginOptions' => [
                'allowClear' => true
            ],
        ]);
        ?>

Answer 1

传递给事件回调的'e'参数有一个目标属性，用于保存事件的当前目标输入。从那里，您可以访问其价值。

$('body').on("mouseenter", ".test", function(e) {
  console.log(e.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="test">
  <option value="1">1</option>
  <option value="2">2</option>
</select>


<select class="test">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

在收到有关问题的更准确详细信息后编辑：

您无法与html select的选项进行交互。

然后解决方案是使用一些自定义html / css / js组合来模拟选择。你可以在这里查看一些结果的想法：https://material.angular.io/components/select/overview

即使你没有使用这个框架，它只是一个例子。然后，您可以与选择的每个部分自由交互。