java中基于下拉选项选择的字段添加

Question

我的服务器页面中有一个dropdown 列表字段。我想根据下拉菜单中选择的选项向页面添加文本字段。

渲染字段的java代码：

protected void printContent(HttpServletRequest request, HttpServletResponse response) {
        StringBuffer sb = new StringBuffer();
        makeJsScriptsAdvancedRest(request, sb);

        sb.append("<TABLE id='abc' style='width:100%;'> \n");
            makePagingTypeField(sb);
        sb.append("</TABLE>");
        if (option 1 : don't show fields)
        {
            sb.append("<TABLE id='certs1' style='display:none'>");
            makeField1(sb);
            sb.append("</TABLE>");
            sb.append("<TABLE id='certs2' style='display:none'>");
            makeField2(sb);
            makeField3(sb);
            makeField4(sb);
            sb.append("</TABLE>");
        }
        else if (option 2 : show fields in certs1)
        {
            sb.append("<TABLE id='certs1' style='display:block'>");
            makeField1(sb);
            sb.append("</TABLE>");
            sb.append("<TABLE id='certs2' style='display:none'>");
            makeField2(sb);
            makeField3(sb);
            makeField4(sb);
            sb.append("</TABLE>");
        }
        else if (option 3 : show fields in certs2)
        {
            sb.append("<TABLE id='certs1' style='display:none'>");
            makeField1(sb);
            sb.append("</TABLE>");
            sb.append("<TABLE id='certs2' style='display:block'>");
            makeField2(sb);
            makeField3(sb);
            makeField4(sb);
            sb.append("</TABLE>");
        }
        print(sb, true);
    }

编辑：

根据drgPP的回答，我将代码更改如下。 Javascript代码：

FLD_PagingType 是 PaginField 下拉列表的名称。

protected void makeJsScriptsAdvancedRest(HttpServletRequest request,StringBuffer sb)    {
    sb.append("<script type=\"text/javascript\">\n");
    sb.append("function updateValues() {\n");
    sb.append(" var y = document.getElementById('certs1'); var z = document.getElementById('certs2');"+

            " var x = document.getElementById('" + FLD_PagingType + "'); var w = x.options[x.selectedIndex].text;" +

            "if(w =='" + PAGE_BASED + "') { y.style.display = 'block'; z.style.display = 'none'; }" +

            "else if(w =='" + RECORD_BASED + "') { y.style.display = 'none'; z.style.display = 'block';}  " +

            "else if(w =='" + NO_PAGINATION + "') { y.style.display = 'none'; z.style.display = 'none';} \n");

    sb.append("}\n");
    sb.append("</script>\n");
}

getSelectValue() 返回字符串选项值。

我可以正确操作选择字段，但选择选项时 UI 上的内容会发生变化。

任何建议，指针表示赞赏！

Answer 1

首先，在javascript中，要测试相等性，您必须使用==（测试值）或===（测试值和类型），但不能使用equals()方法（这是一个java方法）。

你在标签中提到了jQuery，并且你使用了JavaScript。

示例如何使用 jQuery 在<select></select> 事件上添加监听器。

HTML：

<input id="field" name="field" type="text" value="" />
<select id="test" name="test">
 <option value="1">First value</option>
 <option value="2">Second value</option>
</select>

jQuery：

<script>
$(document).ready(function() {
    $("#test").change(function() {
       var selectedValue = $("#test").val();
       if (selectedValue == "1") {
          $("#field").val("First option selected");
       } else {
          $("#field").val("Second option selected");
       }
    }
    });
});
</script>

P.S: 使用前别忘了导入 jQuery 库。