Question

我试图避免使用AJAX来提高性能，所以我只为下拉字段（Child）加载一次值列表（集合）。将根据另一个下拉字段（父级）的选择动态填充此子字段。

我想将这些值作为javascript变量加载，该变量将根据所选的Parent值分配给Child。

这些值将作为html（gsp）输出的一部分写入。

有什么建议吗？

Answer 1

这样做的一种方法是让GSP将这些子值（列表）写入JS变量。在父下拉列表的更改（onchange）上，根据父选择将适当的值列表加载到子项下拉列表中。 Modify from this answer

另一种方法是让GSP将所有列表数据呈现为DOM对象（子项下拉列表）。在父下拉列表的更改（onchange）上，根据父选择显示或隐藏这些DOM对象。

Answer 2

根据Jayson的建议，我开发了一个小测试。这是一个概念证明，我认为最终的目标是通过在父母选择一个选项时隐藏和显示Child来做第二个建议。这将留待将来的重构。

所以给出以下内容：每个产品类别都有一个指定的产品类型列表（仅用于命名我们的对象）。

<强>模型：

class ProductCategory { 
    String productCatCode
    String productCatName
    String productCatDescr
}

class ProductType {
    String productTypeCode
    String productTypeName
    String productTypeDescr
    ProductCategory productCat
}

<强>控制器：

class PreloadedListsController {
    def showCategories() { 
        def catSelection = params.displayCategory
        def typeSelection = params.displayType      

        def prodCat = ProductCategory.list()
        def category1 = ProductCategory.findByProductCatCode("cat1")
        def typesListCat1 = category1 ? ProductType.findAllByProductCat(category1) : []

        def category2 = ProductCategory.findByProductCatCode("cat2")
        def typesListCat2 = category2 ? ProductType.findAllByProductCat(category2) : []

        [prodCat: prodCat, typesListCat1: typesListCat1, typesListCat2: typesListCat2, catSelection: catSelection]      
    }
}

查看：

<head> <title>Dynamically Loaded Dropdowns</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="layout" content="main"> <script type="text/javascript"> function clearDropdown(selectList) { var length=selectList.options.length; for (count=selectList.options.length-1; count>=0; count--) { selectList.remove(count); } } function loadTypes() { var catList=document.getElementById("displayCategory"); var typeList=document.getElementById("displayType"); var catSel= catList.options[catList.selectedIndex].value; //Clear Child dropdown before we load new values clearDropdown(typeList); if (catSel) { if(catSel == "cat1") { // Create empty option clearDropdown(typeList); var optionItem=document.createElement("option"); optionItem.text=" "; typeList.add(optionItem); // Create all options from query <g:each in="${typesListCat1}" var="item"> var optionItem=document.createElement("option"); ${raw("optionItem.text=\"${item}\"; ") } typeList.add(optionItem); </g:each> } else if (catSel == "cat2") { // Create empty option clearDropdown(typeList); var optionItem=document.createElement("option"); optionItem.text=" "; typeList.add(optionItem); // Create all options from query <g:each in="${typesListCat2}" var="item"> var optionItem=document.createElement("option"); ${raw("optionItem.text=\"${item}\"; ") } typeList.add(optionItem); </g:each> } } } </script> </head> <body> <g:form action="showCategories" controller="PreloadedLists" name="searchForm"> <div> <label>Product Category</label> <span> </span> <g:select name="displayCategory" from="${prodCat}" value="${catSelection}" onChange="loadTypes()" optionKey="productCatCode" optionValue="productCatName" noSelection="['':'']" style="width: 150px;"/> <span>   </span> <label>Product Type</label> <span> </span> <select name="displayType" id="displayType"></select> </div> <div> <g:submitButton name="search" value="Search" /> </div> </g:form> </body>

<强>自举：

def prodCat01 = new ProductCategory(productCatCode: "cat1", productCatName: "prodCategory1", productCatDescr: "Product Category #1").save(failOnError: true) def prodType01 = new ProductType(productTypeCode: "prod1", productTypeName: "Product One", productCat: prodCat01, productTypeDescr: "This is Product One Description.").save(failOnError: true) def prodType02 = new ProductType(productTypeCode: "prod2", productTypeName: "Product Two", productCat: prodCat01, productTypeDescr: "This is the Second Product Description.").save(failOnError: true) def prodType03 = new ProductType(productTypeCode: "prod3", productTypeName: "Product Three", productCat: prodCat01, productTypeDescr: "This is the THIRD Product Description. The best product of all. Also number three is a lucky number!").save(failOnError: true) def prodType04 = new ProductType(productTypeCode: "prod4", productTypeName: "Product FOUR", productCat: prodCat01, productTypeDescr: "FOURTH product in the list. The most popular product is product number FOUR!!").save(failOnError: true) def prodCat02 = new ProductCategory(productCatCode: "cat2", productCatName: "prodCategory2", productCatDescr: "Product Category #2").save(failOnError: true) def prodType05 = new ProductType(productTypeCode: "prod5", productTypeName: "Product FIVE", productCat: prodCat02, productTypeDescr: "This is Product Description #5.").save(failOnError: true) def prodType06 = new ProductType(productTypeCode: "prod6", productTypeName: "Product Six", productCat: prodCat02, productTypeDescr: "This is the Sixth Product Description.").save(failOnError: true)

<强>结果：有效。请注意我如何预加载每个Parent选项可用的子列表。我需要使用Raw函数才能使<g:each>循环在gsp中工作。由于表单提交了相同的操作（已在params和catSelection变量中读取），因此需要执行额外的工作来处理typeSelection对象中的选定值。

屏幕输出：

如何通过在Grails中选择另一个下拉列表（不使用AJAX）来动态加载一个下拉列表

2 个答案: