1

我正在尝试在 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"/>

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

4

3 回答 3

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
            }
于 2013-07-11T12:34:50.950 回答
1

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':'']])

}

完成了，我期待一些分数:)！！！丹尼尔

于 2013-07-26T12:43:15.873 回答
0

如果您将响应持有者更改为 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 请求中获得了正常的响应状态。

于 2013-07-11T13:43:23.483 回答