Question

I’m working on a project where i have to select multiple options in drop down and that number of text boxes should appear with that selected label. i.e in drop down i have 4 options in drop down i have countries name like India, America, china and i want to select multiple options so i press shift and click multiple options, in this case i press America and china so i want 2 text boxes to be created automatically with text in it of that country name.

Work i have done:
i have done on click work like when user click button that times text boxes are created. that is the work that i have done in the paste. please help me how to do that

Answer 1

Given this markup:

<div id="cont1">

    <select id="sel1" name="sel1" multiple>
        <option value="First">First</option>
        <option value="Second">Second</option>
        <option value="Third">Third</option>
    </select>

</div>

this script should get you started:

$(function() {

    $('#sel1 option').on('click', function(e){

        if($(this).is(':selected')){
            $('<input value="'+$(this).val()+'" />').appendTo('#cont1');
        }

    });

});

In order to actually use the values in, say, a PHP script, you’d need to add names to each input; otherwise, the form fields don’t get submitted with the form. Also, note that this syntax does assume you’re using jQuery 1.7+.