How to update Second Dropdown based on Value of First's in Form Editing of jQgrid

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.

Look at [the answer](http://stackoverflow.com/a/4480184/315935). — Oleg, Apr 15 '14 at 14:06
@Oleg, Thanks but its static data fetching. Mine is dynamic. Lets say STATES are coming from DB. I saw, we have dataUrl option. Can I modify that parameter's value on value change of Country DD in dataEvents block? Then every timeI'll get new values of States from DB. — Jaikrat, Apr 16 '14 at 13:45
Or can we make a ajax call from dataEvents block which will get different valeus of States everytime and we can append them in newOptions string. — Jaikrat, Apr 16 '14 at 13:46
dataUrl is called only once in Form Editing. Then how we will get different values everytime?? — Jaikrat, Apr 16 '14 at 13:52

Jaikrat · Accepted Answer · 2014-04-18T08:27:42.390

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();
    }

How to update Second Dropdown based on Value of First's in Form Editing of jQgrid

1 Answers1