使用 jquery 将选项加载到 select

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

            }

        });
}

在这里，当我点击 select element.but 时，我得到选项值作为下拉菜单，我无法 select 一个特定的 option.how 来解决这个问题

Answer 1

你不能select一个选项的问题是每次你点击select框（包括选项集）调用loadRoleTypes()的函数正在called.You 可以尝试检查 selectbox.Or 中的选项数量，您可以检查任何其他条件。

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

            }

        });
}
}

使用 jquery 将选项加载到 select

loading options to select using jquery

ajax

jquery