easyui-combobox不能选择下拉项的问题

问题遇到的现象和发生背景

使用easyui-combobox，通过js加载的数据，不能选择
代码就很简单，没有重复的控件名称，也没有重复渲染，也没有重复的value和text

用代码块功能插入代码，请勿粘贴截图
html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>基本会话 - jQuery jQuery EasyUI移动端组件功能在线演示title>
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/metro/easyui.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/mobile.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
  <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js">script>
  <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js">script>
  <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.mobile.js">script>
head>
<body>
<div class="easyui-navpanel" style="position:relative">
  <header>
    <div class="m-toolbar">
      <div class="m-title">基本会话div>
    div>
  header>

 ** <select  id="cb1" class="easyui-combobox" label="1:" labelPosition="left" data-options="editable:true,valueFiled:'ruleId',textField:'name'" style="width:100%;" >
  select>
  <select  id="cb2" class="easyui-combobox" label="2:" labelPosition="left" style="width:100%;" >
    <option value="male">儿子option>
    <option value="female">女儿option>
  select>
div>

<script type="text/javascript">
  // 启动页面加载数据
  $(function(){
    var data = JSON.parse("[{\"ruleId\":\"001\",\"name\":\"啊额\"},{\"ruleId\":\"002\",\"name\":\"哦一\"}]");
    $('#cb1').combobox('loadData', data);
  });
script>
**
body>
html>
运行结果及报错内容

img


加载的数据在下拉列表中可以看到，但是不能选择。

cb2，在html中直接写的下拉选项，使用就没有问题

我想要达到的结果

怎么解决combobox不能选择下拉项的问题呢？

valueFiled拼错了，应该是valueField