在带有弹簧形式的jsp中使用Javascript答案

【问题标题】：use Javascript in jsp with spring form在带有弹簧形式的jsp中使用Javascript
【发布时间】：2014-08-21 07:54:37
【问题描述】：

我想编写一个脚本来禁用与第一个下拉列表中选择的值相关的下拉列表（数字 2）。我正在使用脚本标签在第一个下拉列表中编写函数和 onchange 属性，但它不起作用。请看代码并给我解决方案。

form.jsp

    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript">

    function changeDrop() {

    // Get current value
    var val= document.getElementById("ttype").value;
    $("#aap_name").attr("disabled", val=="Common");

    };
    </script>
    </head>
    <body>
    <form:form id="tfnewsearch" modelAttribute="err_model">
    <table cellpadding="1" cellspacing="1" height="250px" style="border-collapse: collapse">
    <tr>
    <td><form:label path="Err_type">Error Type</form:label></td>
    <td><form:select id="ttype" name="Err_type" path="Err_type" items="${Type_list}" onchange="changeDrop();">
    </form:select>
    </td>
    </tr>
    <tr>
    <td><p>Application </p></td>
    <td><form:select id="aap_name" path="Err_application" items="${App_list}">
    </form:select>
    </td>
    </tr>
    </table>
 </form:form>
 </body>
 </html>

我的控制器是

@RequestMapping(value="/form",method=RequestMethod.GET)  
public String  AddError(@ModelAttribute("err_model") ErrorModel errorModel,Map<String, Object> model) {  


 List<String> Type_list = new ArrayList<String>();
 Type_list.add("--Select--");  
 Type_list.add("Common");  
 Type_list.add("Specific");  
  List<String> App_list =errorService.listapplications();
  model.put("Type_list", Type_list);
 model.put("App_list", App_list);
 return "form";
}

【问题讨论】：

如果类型等于普通，我想禁用应用程序下拉菜单。
您是说#aap_name 吗？

标签： javascript jquery spring-form

【解决方案1】：

您不能使用.attr("disabled", false) 切换disabled。无论如何，这将导致下拉菜单禁用。你改用这个。

$("#aap_name").attr("disabled", "disabled");
$("#aap_name").removeAttr("disabled");

这里是 JSFiddle，应该适用于您的情况

function changeDrop() {
    var val= document.getElementById("ttype").value;
    if(val == "Common") $("#aap_name").attr("disabled", "disabled");
    else  $("#aap_name").removeAttr("disabled");
};

【讨论】：

【解决方案2】：

试试这个脚本：

function changeDrop() {
    $("#aap_name").prop("disabled", 'Common' === $("#ttype").val());
};

【讨论】：