Question

I’m a jquery newby and was wondering how I could get these two scripts to “talk” to each other:

<form action="" method="post">
<fieldset>
<div id="selextender"></div>
<p><a href="#" id="seladd">Add</a></p>
</fieldset>
</form>    

$(function () {
     $('a#seladd').click(function () {
         $('<p><select name="items[]"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select><a href="#" class="remove">Remove</a></p>').fadeIn("slow").appendTo('#selextender');
         return false;
     });
     $('.remove').live('click', function () {
         $(this).parent().fadeOut(300, function () {
             $(this).empty();
             return false;
         });
     });
 });

Example: http://jsfiddle.net/UV6Tw/

The above duplicates my select boxes – how do I incorporate the following to dynamically add the select box options and still duplicate the select boxes?

 $(document).ready(function () {
     $('select[name="products"]').focus(function () {
         if ($('option', this).length < 2) {
             $.getJSON('products.php?product=' + $(this).attr('value'), outputProducts);
         }
     })
 });

 function outputProducts(response) {
     $('select[name="products"]').html(response.html).attr('selectedIndex', response.index);
     return true;
 }

<form action="#" method="post">
<select name="products">
<option selected="selected">Please select</option>
</select>   
</form>

Any help would be greatly appreciated, thanks

Answer 1

Given some html that looks like this:

<form action="#" method="post">
<div id="selextender"></div>
<p><a href="#" id="seladd">Add</a></p>
</form>

You can add a new select, and when it is focused load your data using ajax:

//set a counter
var i = $('input').size() + 1;   

//add select
$('a#seladd').click(function() {
    $('<p><select name="product"><option value="0">Please select</option></select><a href="#" class="remove">Remove</a></p>').fadeIn("slow").appendTo('#selextender');         
    return false;
});

//fadeout selected item and remove
$('.remove').live('click', function() {
    $(this).parent().fadeOut(300, function(){
        $(this).empty();
        return false;
    });
});

// dynamically load options when focused.
$('select[name="product"]').live('focus',function(){
    var $this = $(this);
    $this.children(':first').text('please wait.... loading.');
    $.ajax({
        type: 'GET',
        url: 'products.php?product=' + $this.attr('value'),
        success: function(data){
           $this.html(data);
        }                
    });
});

I have mocked up a live example here: http://jsfiddle.net/SJP8h/ (however, note this uses jsfiddle’s mocked ajax calls)