jquery - 让两个 jquery 脚本一起工作

Question

我是一个 jquery 新手，想知道如何让这两个脚本相互“对话”:

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

您可以添加一个新的选择，当它聚焦时使用 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);
        }                
    });
});

我在这里模拟了一个实例:http://jsfiddle.net/SJP8h/ (但是，请注意这使用了 jsfiddle 的模拟 ajax 调用)