loading options to select using jquery

Question

I am using JqueryAjax to load options in Select element.

<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) {

            }

        });
}

here i am getting option values as drop down when i click select element.but i cant select a particular option.how to solve this

Answer 1

The problem you can't select an option is that every time you click the selectbox(Including the option set) the function called loadRoleTypes() is being called.You can try checking the number of options in your selectbox.Or you could check on any other conditions.

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) {

            }

        });
}
}