Question

This script produce a drop down form where I can select the number of drop down fields that can be displayed. However I’m kind of stuck on that. My problem now is how to make default text field base on the value of the second drop down form? For example if I select ‘Ms.’ It will produce Two text field else it will just one text field.

jQuery

$(document).ready(function() {
    $('#bookinfo_adult').change(function() {
        var num = $('#bookinfo_adult').val();
        var i = 0;
        var html = '';
        for (i = 1; i <= num; i++) {
            html += '<br>' + i + '. <select name="gender4-' + i + '">' + '</' + 'option>' + '<option value=' + '"m">Mr. ' + '</option' + '>' + '<option value=' + '"f">' + 'Ms. ' + '</option' + '>' + '</select' + '></br>';
        }
        $('#list').html(html);
    });
});​

HTML

<select id="bookinfo_adult" name="bookinfo_adult">
       <option value="0">- SELECT -</option>
        <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>
        <option value="6">6</option>
    </select>
<div id="list"></div>

Answer 1

Not quite sure what you’re asking, but I guess you want to display input fields dynamically based on the current selection in your generated select elements?

So how about this?

HTML:

<input type="text" id="bookinfo_adult">
<div id="list"></div>

CSS:

#list input { display: none; }

JS:

$(document).ready(function() {
    $('#bookinfo_adult').change(function() {
        var num = $('#bookinfo_adult').val(), i = 0, html = '';
        for (i = 1; i <= num; i++) {
            html += '<div>' + i + '. \
                         <select name="gender4-'+i+'"><option/><option value="m">Mr.</option><option value="f">Ms.</option><select> \
                         <input type="text" class="ms"> <input type="text" class="mr">\
                     </div>';
        }
        $('#list').html(html);
    });
    $(document).on("change", "#list select", function(){
        var parent = $(this).closest("div");
        switch ($(this).val()) {
            case "m": parent.find(".mr").show(); parent.find(".ms").hide(); break;
            case "f": parent.find("input").show(); break;
            default: parent.find("input").hide(); break;
        }
    });
});

I just added two text fields (hidden with CSS at first) and wrapped every “line” of your dropdown in a div for easier selection. Then a onchange handler is created that works for all elements being added to the DOM in the future (once you could use jQuery.live() for that, but it’s deprecated as of version 1.7). The handler itself should be self-explanatory. 😉

Working example: http://jsfiddle.net/DfXEE/