Создание двух Jquery скрипты работают вместе

Question

Я JQuery Newby и было интересно, как я мог бы получить эти два сценария «разговаривать» друг с другом:

<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; 
     }); 
    }); 
}); 

Пример: http://jsfiddle.net/UV6Tw/

Вышеприведенные дубликатами мои поля выбора - как я могу включить следующее, чтобы динамически добавлять опции выбора окна и все еще дублировать поля выбора?

$(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> 

Любая помощь будет принята с благодарностью, спасибо

Answer 1

Учитывая некоторые HTML, который выглядит следующим образом:

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

Вы можете добавить новый выбор, и когда он сфокусирован загрузить данные с помощью Аякс:

//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); 
     }     
    }); 
}); 

я издевался до живого примера здесь: http://jsfiddle.net/SJP8h/ (однако, отметить это использует jsfiddle's mocked ajax calls)