使用 jquery 选择的加载选项

Question

我正在使用 JqueryAjax 在 Select 元素中加载选项。

<div>
    <select id="roleType" name="roleType" 
             onclick="loadRoleTypes();">
               <option value="s">Select</option>
     </select>
</div>

JqueryAjax

function loadRoleTypes()
{           
    $('#roleType').empty().append('<option>select</option>');        
    $.ajax({
            url: '/ci/ajaxcall/loadRoles.php',
            dataType: 'json',
            type: 'POST',
            data: {"userCode": userCode},
            success: function(response) {
              var array = response.value;
              if (array != '')
              {
                for (i in array) {                        
                 $("#roleType").append("<option>"+array[i].ROLE_TYPE+"</option>");
               }

              }

            },
            error: function(x, e) {

            }

        });
}

在这里，当我单击选择元素时，我将选项值作为下拉列表。但我无法选择特定选项。如何解决此问题

Answer 1

无法选择选项的问题是每次单击选择框（包括选项集）都会调用调用的函数loadRoleTypes()。您可以尝试检查选择框中的选项数量。或者您可以检查任何其他条件.

function loadRoleTypes()
{           
if ($('#roleType').find("option").size() == 1) {  //Check condition here
    $('#roleType').empty().append('<option>select</option>');        
    $.ajax({
            url: '/ci/ajaxcall/loadRoles.php',
            dataType: 'json',
            type: 'POST',
            data: {"userCode": userCode},
            success: function(response) {
              var array = response.value;
              if (array != '')
              {
                for (i in array) {                        
                 $("#roleType").append("<option>"+array[i].ROLE_TYPE+"</option>");
               }

              }

            },
            error: function(x, e) {

            }

        });
}
}