2

私はjqueryの初心者で、これら2つのスクリプトを互いに「対話」させるにはどうすればよいか疑問に思っていました:

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

どんな助けでも大歓迎です、ありがとう

4

1 に答える 1

0

次のような 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 呼び出しを使用することに注意してください)

于 2012-09-04T09:54:44.307 に答える