Home/ Questions/Q 7063035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:39:58+00:00

I am facing a problem with jquery. I have a div with 4 drop

  • 0

I am facing a problem with jquery.

I have a div with 4 drop down list and I have an “add more” button.

When I click on “add more” button, another instance of the same div is created just above the “add more” button. I did it via jQuery append() method and it is successfully working, but my problem is that the requirement says that when i select “Other” from the drop down a text box should open where I will fill the name which is not in the list.

I can do this but when i click on “add more” and another instance is created, When I select “other” from the dynamically created listbox the text box is not created because their id becomes same and I know that id can not be same.

Similarly, in rest of the dropdown happens. If i do it by class name then creates all the text box at a time. I do not want this.
I hope you understood my problem.
Please help me and give me a solution how to manage it.

Thanks everybody and thanks stackoverflow.com

Update:

$(document).ready(function() { 
    alert('here'); 
    var content=$("#course").html(); 
    var content1=$("#emp").html(); 
    alert(content); 
    $("#add").click(function(){ 
        var n=$("#course .count").length; 
        if(n!=3){
            $("#course").append(content);
        }
        if(n==2){
            $("#add").hide();
        } 
    });
});

my html is like

dropdown1
dropdown1
dropdown1
dropdown1

add more button

when i select dynamically generated dropdown by append()…the textbox for ‘other’ not appears means unable to handle event on dynamically generated div thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you perhaps want something like this?

    <html>
    <head>
    <title>Scripttest</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript">
        var current = 1;

        $(document).ready(function() {
            $("#addmore").bind('click', function() {
                $("#somediv").append(
                    $("<select/>").attr("id", current).attr("size", 1)
                        .append('<option value="someoption">Some Option</option>' +
                                '<option value="other">Other</option>')
                );
                $("<br/>").insertAfter($("#"+current));
                current++;
            });

            $("#somediv").delegate('select', 'change', function() {
                if($(this).val() == 'other') {
                    $("<textarea/>").attr("id", "tb_"+$(this).attr("id")).insertAfter($(this));
                }
                else {
                    $("#tb_" + $(this).attr("id")).remove();
                }
            });
        });
    </script>
    </head>
    <body>
    <button id="addmore">Add more</button>
    <div id="somediv">
    </div>
    </body>
</html>

    This would allow you to add dropdown lists and add a textarea behind it if the “Other” option is selected and remove it if it is deselected.

    • 0