Generate dynamic TextBoxes based on DropDownList selection using jQuery

Last Reply one year ago By pandeyism

Posted one year ago

hi,

i need code for displaying dropdown list only after the textbox appears. i am trying to run the code. the problem is i have to selected to number of questions to be entered by the user through drop down and after that for each question they should display number of answers for the particular question user wants to enter.

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#divAnswers").hide();
            $("#ddl1").change(function () {
                var total = $("#ddl1").val();
                var rawhtml = "";
                for (var i = 1; i <= total; i++) 
                {
                    rawhtml += "Q. " + i + "<textarea id='txtbox" + i + "' class = 'txtoption' wrap = 'hard'/><br/>";

                    $("#ddlAnswers").change(function () {
                        $("#divAnswers").show();
                        var noOfAnswers = $("#ddlAnswers").val();
                        var rawhtml1 = "";

                        for (var j = 1; j <= noOfAnswers; j++) {
                            rawhtml1 += "Ans" + j + "<textarea id='txtAnswer" + j + "' class = 'txtans' wrap = 'hard'/><br/>";

                        }
                        $("#allanswer").html(rawhtml1);
                    });
                }
                $("#alltext").html(rawhtml);
            });

 

<html>
<body>
    <form id="form1" runat="server">
    <div id = "ddlquestions">
    Number of questions:
    <select id="ddl1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value = "4">4</option>
        <option value = "5">5</option>
    </select>
    </div>
    <br />
    <div id = "divAnswers">
    How many answers?
    <select id = "ddlAnswers">
       <option value = "1">1</option>
        <option value = "2">2</option>
        <option value = "3">3</option>
        <option value = "4">4</option>
    </select>
    </div>
    <div id="alltext">
    </div>
    <div id ="allanswer">
    </div>
    <br />
    <input type ="button"  ID="btnsave" runat="server" value="save" />
    
    </form>
</body>
</html>

 

This question does not have replies that have been liked.