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

Question

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

渲染字段的 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 库之前不要忘记导入它。