2个组合框，选择一个，更改另一个[关闭]答案

【问题标题】：2 comboboxes,select one,change another [closed]2个组合框，选择一个，更改另一个[关闭]
【发布时间】：2016-01-14 03:19:10
【问题描述】：

现在我已经改进了代码，我有一个新问题，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
    //simulate the database
    var data={};
    data.id1=[{value:"id1",text:"aa1"},{value:"id2",text:"aa2"}];
    data.id2=[{value:"id3",text:"aa3"},{value:"id4",text:"aa4"}];
    data.id1.id1=[{value:"id1",text:"aaa1"},{value:"id2",text:"aaa2"}];
    data.id1.id2=[{value:"id3",text:"aaa3"},{value:"id4",text:"aaa4"}];
    data.id2.id1=[{value:"id5",text:"aaa5"},{value:"id6",text:"aaa6"}];
    data.id2.id2=[{value:"id7",text:"aaa7"},{value:"id8",text:"aaa8"}];
    $(function(){
        var c1id;
        $("#c1").combobox("loadData",[{value:"id1",text:"a1"},{value:"id2",text:"a2"}]);
        //change c2 box when c1 on select
        $("#c1").combobox({
            onSelect:function(record){
                c1id=record.value;
                $("#c2").combobox("clear");
                $("#c2").combobox("loadData",data[record.value]);
                try{var c2data=$("#c2").combobox("getData");//c2data.length is 0?
                value=c2data[0].text;
                $("#c2").combobox("select",value);}
                catch(e){

                }
            }
        }) 
        $("#c2").combobox({
            onSelect:function(record){
                $("#c3").combobox("clear");
                $("#c3").combobox("loadData",data[c1id][record.value]);
                try{var c2data=$("#c3").combobox("getData");//c2data.length is 0?
                value=c2data[0].text;
                $("#c3").combobox("select",value);}
                catch(e){

                }
            }
        })
    });
</script>
</head>
<body>
<input id="c1" class="easyui-combobox">
<input id="c2" class="easyui-combobox">
<input id="c3" class="easyui-combobox">
</body>
</html>

现在我已经改进了代码，我有一个新问题，

现在是 3 个组合，我在第一个组合中选择“a1”，在第二个组合中自动选择“aa1”，但在第三个组合中没有选择“aaa1”。原因

$("#c2").combobox({
        onSelect:function(record){

这里的record 是未定义的。为什么？这一行

$("#c2").combobox("select",value);}

将触发#c2 onselect 事件，但记录参数未定义。所以当我选择第一个组合框时，我无法自动选择第三个组合框的第一项。

这是之前的问题：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
    //simulate the database
    var data={};
    data.id1=[{value:"id1",text:"aa1"},{value:"id2",text:"aa2"}];
    data.id2=[{value:"id3",text:"aa3"},{value:"id4",text:"aa4"}];
    $(function(){
        $("#c1").combobox("loadData",[{value:"id1",text:"a1"},{value:"id2",text:"a2"}]);
        //change c2 box when c1 on select
        $("#c1").combobox({
            onSelect:function(record){
                $("c2").combobox("clear");
                $("c2").combobox("loadData",data[record.value]);
                var c2data=$("#c2").combobox("getData");//c2data.length is 0?
                value=c2data[0].text;
                $("c2").combobox("select",value);
            }
        }) 
    });
</script>
</head>
<body>
<input id="c1" class="easyui-combobox">
<input id="c2" class="easyui-combobox">
<input id="c3" class="easyui-combobox">
</body>
</html>

有2个comboboxes，当第一个comboxbox的item被选中时，改变第二个combobox的数据，并选择第一个comboxbox

第二个组合框。页面加载后，我选择了第一个组合框的“a1”，此行已执行： var c2data=$("#c2").combobox("getData"); 但是c2data.length是0？为什么？

【问题讨论】：

$("c2") ==> $("#c2")。缺少 ID 选择器 #。

标签： javascript jquery user-interface combobox jquery-easyui

【解决方案1】：

正如@Tushar 在评论中指出的那样，看起来这只是一个错字。您在 c2 的 ID 选择器中的几个地方留下了井号。

//simulate the database
var data = {};
data.id1 = [
  { value: "id1", text: "aa1" },
  { value: "id2", text: "aa2" }
];

data.id2 = [
  { value: "id3", text: "aa3" },
  { value: "id4", text: "aa4" }
];
    
$(function() {
  $("#c1").combobox("loadData", [
      { value: "id1", text: "a1" },
      { value: "id2", text: "a2" }
  ]);
  
  //change c2 box when c1 on select
  $("#c1").combobox({
    onSelect: function(record) {
      $("#c2").combobox("clear");
      $("#c2").combobox("loadData", data[record.value]);
      var c2data = $("#c2").combobox("getData"); //c2data.length is 0?
      value = c2data[0].text;
      $("#c2").combobox("select", value);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link href="http://www.jeasyui.com/easyui/themes/default/easyui.css" rel="stylesheet"/>
<link href="http://www.jeasyui.com/easyui/themes/icon.css" rel="stylesheet">
<link href="http://www.jeasyui.com/easyui/themes/color.css" rel="stylesheet">
<link href="http://www.jeasyui.com/easyui/demo/demo.css" rel="stylesheet">

<input id="c1" class="easyui-combobox">
<input id="c2" class="easyui-combobox">
<input id="c3" class="easyui-combobox">

【讨论】：

我改进了代码，现在有3个combo，我有一个新问题，我写在上面
@heheyou 发布一个新问题，而不是修改您原来的问题。