javascript - 单击选择中的选项标签时将类添加到祖 parent

Question

我有 3 列，每列都有一个表单的选择。 我试图让一个类“单击”到我的 div，该类具有“col-12”，具体取决于我当前使用的选择项，并且仅当我选择一个选项时。这是我目前拥有的代码，但显然 jquery 没有应用于我的标签，这是默认行为吗？

PS:当我仅选择 .form-control 类时，代码有效，但我不希望这样，我只想在用户实际单击选择元素内的任何选项时应用它。

JQUERY:

function(){
    $('.form-control option').on('click', function(){
        $(this).closest('.col-12').addClass('clicked');
    });
}

HTML 我的 html 有 4 列(仅更改每一列内的选项)

<div class="row">
    <div class="col-12 col-sm-6 col-lg-3 arrow--custom">
        <select class="form-control" id="room" name="room">
            <option value="" selected="" disabled="">Nombre de chambre</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>                                
        </select>
     </div>
</div>

Answer 1

问题是您正在监听该元素，而您需要改为监听。

当值发生变化时，您添加该类。这是一个工作片段，其中单击的类将添加红色边框以使其可见:

(function(){
    $('select.form-control').on('change', function(){
        $(this).closest('.col-12').addClass('clicked');
    });
})();

.clicked select {
  border: red 2px solid; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-12 col-sm-6 col-lg-3 arrow--custom">
        <select class="form-control" id="room" name="room">
            <option value="" selected="" disabled="">Nombre de chambre</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>                                
        </select>
     </div>
</div>