1简易方法

Question

我正在尝试在Grails工作中创建一个动态下拉菜单。在第一个下拉列表中选择后，第二个下拉列表未填充。

这是我的_form gsp上的代码：

<g:select name="department" from="${MCM.MGDepartment.list(sort:'dep')}" values="${MGMatricesSRFApproversInstance?.department?.id}" optionKey="id" noSelection="${[null: 'Select One...']}"
             onchange="${remoteFunction (controller: 'mGMatricesSRFApprovers', action: 'findJobTitleForDepartment', params: '\'department.id=\' + this.value', update: 'jobTitleSelection')}"/>              
<td id="jobTitleSelection">
    <select>
        <option>Select One...</option>
        <g:select name="jobTitle.id" from="${MCM.MGJobTitle.list()}" optionKey="id"/>
    </select>
</td>

我的控制器中的代码：

def findJobTitleForDepartment = {
  println "findJobTitleForDepartment"
  def job = MGDepartment.get(params.department.id)
  render(template: 'jobTitleSelection', model:  [mGJobTitle: job.mGJobTitle])
}

在我的创建标题中，我有：

<g:javascript library="jquery"/>

有没有办法让动态下拉工作？

Answer 1

是的，完全

像这样：

 <g:select name="departmentId" id="department" from="${MCM.MGDepartment.list(sort:'dep')}" values="${MGMatricesSRFApproversInstance?.department?.id}" optionKey="id" noSelection="${[null: 'Select One...']}"
                 onchange='loadJobTitles();'>    
 <g:select id="jobTitle" name="jobTitleid" from="${[]}" optionKey="id"/>

 <script type="text/javascript">        

      function loadJobTitles(init)
            {
                var root="${resource()}";
                var departmentid=document.getElementById('department').value;               

                var url = root+'/Departemnt/findJobTitleForDepartment?departementId='+departmentid;

                jQuery('#jobTitle').load(url);
            }
            </script>

//你发现JobTitleForDepartment应该像这样实现

 def findJobTitleForDepartment() {
    def html="" 
    def jobtitle = null
    def dep = null
    def boolean empityString = true

      if(params?.departementid!='null') {

            dep =Department.get(params?.departementid?.toLong())
            jobtitle= dep.mGJobTitle.sort{it.name} // you can ignore sort here //just list



            jobtitle.each {
                if(empityString)
                {
                    empityString = false
                    html=html + "<option selected='selected' value=\'null\'></option>"
                    html=html + "<option value=\'${it.id}\'> ${it}</option>"
                }
                else
                    html=html + "<option value=\'${it.id}\'> ${it}</option>"

} //if end upper root

render html
            }

Answer 2

1简易方法

定义更改并使用ajax发布，然后从控制器DONE返回选择框！怎么样？

<g:select name="department" id="DepartmentId" from="${MCM.MGDepartment.list(sort:'dep')}" values="${MGMatricesSRFApproversInstance?.department?.id}" optionKey="id" noSelection="${[null: 'Select One...']}"
             onchange="${remoteFunction (controller: 'mGMatricesSRFApprovers', action: 'findJobTitleForDepartment', params: '\'department.id=\' + this.value', update: 'jobTitleSelection')}"/>              
<td id="jobTitleSelection">
    <select>
        <option>Select One...</option>
        <g:select name="jobTitle.id" id="jobID" from="${[]}" optionKey="id"/>
    </select>
</td>

使用g：javascript并定义ajax jquery post

<g:javascript>
$(document).ready(function(){
$("#territory").change(function() {
            var depValue = $("#DepartmentId").val();
            $.ajax({
             url:"${resource()}"+"/Department/getJobByDepartment",
             data:"id="+this.value,
             method:"POST",
             cache:false,
             success:function(result) {
             $("#jobID").html(result);
             $("#jobID").val(depValue );
             $("#jobID").trigger('change');
             }             
            });     
        }); 
});

</g:javascript>

终于控制器

def getJobByDepartment(params){

  //check for null selection and add the nessary code but if not null

  println "findJobTitleForDepartment"
  def departemnt= MGDepartment.get(params?.DepartmentId)
  render g.select(from: departement.jobs, id:"jobId",name:"job",noSelection:['null':'']])

}

完成，我期待一些观点：）!!!丹尼尔

Answer 3

如果您将响应持有者更改为div而不是td，那么我认为您应该能够获得如下结果：

    <g:select name="department" from="${MCM.MGDepartment.list(sort:'dep')}" optionValue="dept" optionKey="id" noSelection="${[null: 'Select One...']}"
             onchange="${remoteFunction (controller: 'mGMatricesSRFApprovers', action: 'findJobTitleForDepartment', params: '\'department.id=\' + this.value', update: 'jobTitleSelection')}"/>              
<td >
<div id="jobTitleSelection">

        <g:select name="jobTitle.id" from="${MCM.MGJobTitle.list()}" optionKey="id"/>

</div>
</td>

我假设您的页面上有Jquery，并且您从ajax请求中获得了响应状态。

Grails动态下拉使用remoteFunction不起作用

3 个答案:

1简易方法

终于控制器