Question

I’ve been working on a piece of code for a bit now. I have the bulk of the code, but the actual transfer of forms is throwing me off.

$("#shrimpfrm").children().map(function() {
    var child = $(this);
    var value = child.val();
    var container = $("#shrimpMaster");
    var field = $("<input />");

    if (child.is(":select")) {
        $(container) 
            // THIS IS WHERE I'M LOST 

    }

    return null;
});

I need to add the value of any select box in #shrimpfrm to a text box in #shrimpMaster. The text boxs actually have to be created in #shrimpMaster I believe I have the proper function set, and all the variables in place, I just don’t know where to go from here. Any help would be appreciated.
Thanks.

Answer 1

Without seeing your specific HTML, and without knowing the relationship between the two forms, I’d suggest:

$('#shrimpfrm select').each(
    function(){
        $('<input />').val($(this).val()).appendTo($('#shrimpMaster'));
    });

JS Fiddle demo.

This will find all the select elements within the #shrimpfrm form, create an input (which defaults to type="text") with the value from the current select and then append that to the #shrimpMaster form.

To do this in response to a change made to a select:

$('select').change(
    function() {
        $('#shrimpMaster input:text').remove();
        $('#shrimpfrm select')
            .each(
                function(){
                    $('<input />')
                        .val($(this).val())
                        .appendTo($('#shrimpMaster'));
                });
    });​

JS Fiddle demo.