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>

您可以添加新的选择，并在聚焦时使用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调用）

使两个jquery脚本一起工作

1 个答案: