如何动态创建扩展器

时间:2015-04-27 13:38:02

标签: html

我在动态创建扩展器时遇到问题。 我有一个页面,其中有三个下拉框用于技术,主题和子主题,分别如国家,州和城市。它运作正常。 而不是下拉框,我想显示使用扩展器。当我点击技术时,它应该显示相应的主题,当我点击一个特定的主题时,它应该显示相应的副主题。我该怎么做。 谢谢。 这是我的代码。

<script>
    jQuery(document).ready(function() {
        // binds form submission and fields to the validation engine
        jQuery("#preRegistrationForm").validationEngine();/*'attach', {promptPosition : "bottomRight"}*/
    });
    function getSubject(){
        $('#subjectId').remove();
        var technology=$("#technologyId").val();
         $.get('${path}/GetSubject',{technologyname:technology},function(responseJson) {
               var strs="<select id='subjectId' name='subjectId' onchange='getSubtopic()'><option >--select subject--</option>";                                 
             $.each(responseJson, function(index, value) {          
               strs=strs+"<option name='"+value+"' value='"+index+"'>"+value+"</option>";     
                  });
             strs=strs+"</select>";
             $("#subjectDivId").append(strs);
          });

        }

         function getSubtopic() { 
             $('#subtopicId').remove(); 
            var subject=$("#subjectId").val();
               $.get('${path}/GetSubtopic',{subjectname:subject},function(responseJson) {   
                   var str="<select id='subtopicId' name='subtopicId'><option >--select subtopic--</option>";                           
                   $.each(responseJson, function(index, value) {               
                       str=str+"<option name='"+value+"' value='"+index+"'>"+value+"</option>";     
                        });
                   str=str+"</select>";
                   $("#subtopicDivId").append(str);
                });
               jQuery("#preRegistrationForm").validationEngine();
            }

</script>
<link rel="stylesheet" href="${path}/css/validationEngine.jquery.css"
    type="text/css" />

</head>
<body>
    <img src="<%=path%>/images/logo.png" id="ctl00_ctl00_ctl00_Img18"
        style="height: 150px;width: 250px;vertical-align: middle;alt="copyright" width="55">
<center>


    <form name="preRegistrationForm" action="<%=path%>/VerificationAction"
        method="post" id="preRegistrationForm" class="login">


        <p>
            <br />
        </p>
            <table>
            <select id="technologyId" name="technologyId" class="validate[required] text-input" onchange='getSubject()'>
                    <option value="">
                        Select Subject
                    </option>
                    <c:forEach items="${applicationScope.examSubjectsList}"
                        var="technologyTO">
                        <option value="${technologyTO.technologyId}">
                            <c:out value="${technologyTO.technologyName}"></c:out>
                        </option>
                    </c:forEach>
                </select><br>
                <div id="subjectDivId"></div>
                <div id="subtopicDivId"></div>
            <tr><td><b><%=resourceBundle.getString("label.mobilenumber")%><font
                color='red'>* </font></b> </td><td><input type="text" name="mobileNumber"
                id="mobileNumber"
                class="validate[required,custom[onlyNumberSp],maxSize[10],minSize[10]] text-input"
                onchange="javascript: ajaxFunction();"></td></tr></table> <span id="check_msg"></span>

0 个答案:

没有答案