Question

I am doing Form Editing in jqGrid. While Adding new row, I have two dropdowns where second's values depends on First's value.

I am struglling with, how to populate Second DD based on what we select on First.

First is having STATIC values.

Was it helpful?

Solution

It will work like below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

<script>


    grid.jqGrid({
        data: mydata,
        datatype: 'local',
         ondblClickRow: function(rowid) {
            jQuery(this).jqGrid('editGridRow', rowid,
                                {recreateForm:true,closeAfterEdit:true,
                                   closeOnEscape:true,reloadAfterSubmit:false});
           },
        colModel: [
            { name: 'Name', w 200 },
            { name: 'Country', width: 100, editable: true, formatter: 'select',
                edittype: 'select', editoptions: {
                    value: <someStaticOrDynamicValues>,                     
                    },
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function(e) {
                                changeStateSelect(e);
                            }
                        }
                    ]
                }
            },
            {
                name: 'State', width: 100, editable: true, formatter: 'select',
                edittype: 'select', editoptions: { value: states }
            }
        ],      

    });

    function changeStateSelect(e){
            var countryId = $(e.target).val();
            $.ajax({
                url:"getStateList.html?countryId="+countryId,
                type: "post",
                success:function(newOptions){
                    var form = $(e.target).closest("form.FormGrid");
                    $("select#State.FormElement",form[0]).html(newOptions);
                }
            });
        }
</script>
 <BODY>

 </BODY>
</HTML>

Some where in JAVA

@RequestMapping(value = "/getStateList.html", method = RequestMethod.POST)
    public @ResponseBody
    String getSuperVisorList(@RequestParam("countryId") String countryId) throws Exception {

        StringBuffer select = new StringBuffer("<select>");
        select.append("<option value=''>  </option>");
        for (int i =0; i<10; i++) {
            select.append("<option value='" 
                        + i
                        + "'>" + "youValues" + "</option>");
        }
        select.append("</select>");
        return select.toString();
    }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top