Javascript Jquery-单击Select元素-如何在每次单击时只执行一次？

我在表单上有一个select元素，我需要它，当我点击它时，一些代码会执行，当我选择一个选项时，没有代码会执行

下面的代码被执行了两次，所以我无法选择一个选项，代码再次执行，我选择的选项被重置

HTML：

<select class="form-control" id="opportunity_id" name="opportunity_id">
    <option value="">(Choose opportunity)</option>
</select>

（选择机会）

JS：

$('#opportunity_id').on('click', function(ev) {

    $.ajax({
      url: "/opportunitylist/",
      type: 'GET',
      success: function(resOpportunities) {

        var $select = $('#opportunity_id');
        $select.find('option').remove();

        var count = 0;
        $select.append("<option value=''>(Choose opportunity)</option>");
        $.each(eval(resOpportunities), function(key, value) {
            $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
            count = count+1;                              
        });
      }
    }); 
});

$（“#商机_id”）。在（'click'，函数（ev）{
$.ajax({
url:“/opportunitylist/”，
键入：“GET”，
成功：功能（再支持机会）{
var$select=$（“#机会_id”）；
$select.find（'option'）.remove（）；
var计数=0；
$select.append（“（选择机会）”）；
美元。每个（评估（再支持机会）、功能（键、值）{
$select.append（“”+value[1]+“”）；
计数=计数+1；
});
}
}); 
});

我的问题是，这段代码有修复程序吗？如何使此代码在每次单击select元素时执行一次？

使用on focus解决

$('#opportunity_id').on('focus', function(ev) {

$.ajax({
  url: "/opportunitylist/",
  type: 'GET',
  success: function(resOpportunities) {

    var $select = $('#opportunity_id');
    $select.find('option').remove();

    var count = 0;
    $select.append("<option value=''>(Choose opportunity)</option>");
    $.each(eval(resOpportunities), function(key, value) {
        $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
        count = count+1;                              
    });
  }
}); 
});

$（“#商机_id”）。关于（'focus'，函数（ev）{
$.ajax({
url:“/opportunitylist/”，
键入：“GET”，
成功：功能（再支持机会）{
var$select=$（“#机会_id”）；
$select.find（'option'）.remove（）；
var计数=0；
$select.append（“（选择机会）”）；
美元。每个（评估（再支持机会）、功能（键、值）{
$select.append（“”+value[1]+“”）；
计数=计数+1；
});
}
}); 
});

每当使用事件链接触发事件时，可以尝试删除事件处理程序，如：

$('.selector')
        .off('click', '.item')
        .on('click', '.item', function() {
            // code goes here
         })

因此，在您的情况下，它将类似于：

$('#opportunity_id').off('click').on('click',callBackEnd());

function callBackEnd(ev) {

    $.ajax({
      url: "/opportunitylist/",
      type: 'GET',
      success: function(resOpportunities) {

        var $select = $('#opportunity_id');
        $select.find('option').remove();

        var count = 0;
        $select.append("<option value=''>(Choose opportunity)</option>");
        $.each(eval(resOpportunities), function(key, value) {
            $select.append('<option value=' + value[0] + '>' + value[1] + '</option>');
            count = count+1;                              
        });
      }
    }); 
}

$（'#opportunity_id'）。关闭（'click'）。打开（'click'，callBackEnd（））；
函数调用后端（ev）{
$.ajax({
url:“/opportunitylist/”，
键入：“GET”，
成功：功能（再支持机会）{
var$select=$（“#机会_id”）；
$select.find（'option'）.remove（）；
var计数=0；
$select.append（“（选择机会）”）；
美元。每个（评估（再支持机会）、功能（键、值）{
$select.append（“”+value[1]+“”）；
计数=计数+1；
});
}
}); 
}

使用

更改

事件而不是

单击

。啊，我明白了。为什么不在页面加载后加载这些呢？它们似乎不依赖于ajaxHi中的任何其他数据，我不会在页面加载后加载，因为每次用户单击操作系统选择框时，我都需要进行此ajax调用。