如何在jquery中使用select2编写select box的open事件

nbysray5 于 2023-03-29 发布在 jQuery

关注(0)|答案(2)|浏览(224)

如何在jquery中使用select2为select box编写on open事件。我尝试使用.on（“change”），但一旦我们单击selectbox中的选项，它就会被触发。我需要在打开selectbox时触发的事件
我试着用.click，.change，.focus

$('#js_pdp_campus').on('select2:open', function(e) {
            
            console.log("hi");
            let $campusData = "/product-commons/getcampusdata/?baseProductCode=MBS_86530";
            $.ajax({
                type: 'GET',
                url: $campusData,
                contentType: 'application/json',
                success: function (data) {
                    console.log("poc data is", data);
                },
                error: function(error) {
                }
            });
            return $campusData;
        })

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<div class="control">
  <select name="campus" id="js_pdp_campus" class="campusDataClass js-pdp-course-finder-select bned-select-input js-enable-select-input form-control js-basic-single" role="listbox">
    <option>campus 1</option>
    <option>campus 2</option>
    <option>campus 3</option>
  </select>
</div>

jquery

来源：https://stackoverflow.com/questions/75853871/how-to-write-on-open-event-for-select-box-in-jquery-using-select2

2条答案

按热度按时间

insrf1ej1#

您可以使用事件https://select2.org/programmatic-control/events

$(document).ready(function() {
  $('.js-example-basic-single').select2();
  $('.js-example-basic-single').on('select2:opening', function(e) {
    console.log("select2:opening");
  });
});

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

赞(0）回复(0）举报 2023-03-29

9fkzdhlc2#

使用.focus()方法。尝试下面的方法。

$('.sbox').focus(function() {
  console.log("WORKING..");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<input>
<select class="sbox">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>

赞(0）回复(0）举报 2023-03-29

我来回答

如何在jquery中使用select2编写select box的open事件

2条答案

相关问题

热门标签

最新问答