2

こんにちは私はドロップダウンリストの次のシナリオを持っています

ここに画像の説明を入力してください

cat1オプションを選択するたびに、subcat1オプションが入力されます。ただし、別のカテゴリを追加する場合は、サブ猫オプションと一緒にではなく、猫1オプションのみを追加する必要があります。しかし、私の場合、猫1とサブ猫の両方のオプションが読み込まれます。以下は、ドロップダウンリストを複製するための私のコードです。

        <div class="new-categories">
                    <div class="new-category">
                        <select class="category-select" name="categories">
                        <option></option>
                        <option value="1">cat 1</option>

                    </select>
                    <select class='category-select-sub' style="display:none">
                        <!-- loaded from ajax -->
                    </select>
        </div></div>
    <a href="#" class="add-another-cat smallest" style="">Add another category</a>


$('.add-another-cat').click(function(event){
             event.preventDefault();
             var $orDiv = $('.new-category:last').after($('.new-category:first').clone());

});

これは私が実際にどのように見えるべきかです

ここに画像の説明を入力してください

ありがとう。

更新：ajax結果を入力

 $('div.new-categories').on('change', 'select.category-select', function () { 
             var $newselect = $('<select />').addClass('category-select-sub');
    $(this).parent().append($newselect);
            var cat_id = $(this).val();
            $.ajax({
                url:baseUrl+'categories/getsubcat',
                data:{'id':cat_id},
                dataType:'json',
                async:false,
                type:'POST',
                success:function(data){
                    var subhtml = data;
                    $('.category-select-sub').show();
                    $('.category-select-sub').html(subhtml);
                }
            });
        });

新しい猫のリストが追加され、オプションが選択されると、最初のサブ猫は新しいリストに従って変化します。これを防ぐ方法は？

4

3 に答える 3

2

あなたのコードは私には意味がありませんが、これがあなたがやろうとしていることだと思います. 私が間違っている場合は修正してください。

「 div を複製して divnew-categoryに追加しnew-categoriesたいと思います。最初の選択リストのみを複製し、他には何も複製したくありません。

http://jsfiddle.net/HZp5M/

$('a.add-another-cat').click(function(e) {
    e.preventDefault();
    //clone the first div
    var $newdiv = $('div.new-category:first').clone();
    //remove the second select (if there is one)
    $newdiv.children('select.category-select-sub').remove();
    //append new div
    $('div.new-categories').append($newdiv);
});
于 2013-01-25T03:51:21.243 に答える
1

http://jsfiddle.net/SCARr

<script src="//code.jquery.com/jquery-latest.js"></script>
<div id="clone" class="new-category" style="display:none;">
    <select class="category-select" name="categories">
    <option></option>
    <option value="1">cat 1</option>

    </select>
    <select class='category-select-sub' style="display:none">
        <!-- loaded from ajax -->
    </select>
</div>
<div class="new-categories">
</div>
<a href="#" class="add-another-cat smallest" style="">Add another category</a>

<script>
$('.add-another-cat').click(function(event){
    event.preventDefault();
    var $orDiv = $('.new-category:last').after($('#clone').clone().removeAttr('id').show());
});
$('.new-categories').html($('#clone').clone().removeAttr('id').show());
</script>
于 2013-01-25T03:30:29.263 に答える
0

ソリューションに影響を与える可能性があるため、2番目のサブ選択メニューがどのように表示されるかを確認したいと思います.

解決策 1 - 空の状態でのより良い作成

問題は HTML 構造にあります

<div class="new-category">
      <select class="category-select"> ... </select> 
      <select> ... </select> 
</div>

クローン.new-categoriesを作成すると、両方の選択要素がクローンされます。必要なものだけを複製できるように、HTML を再構築する必要があります。クローンなしで自分で作成する必要があるものがあります。たとえば、次のようなものです。

$('.new-category:last').after( $("<div/>")
         .addClass("new-category").append($('.category-select:last').clone()).append($("<select/>").addClass(".category-select-sub").hide());

解決策 2 - 複製後にサブセレクトを空にする

選択を空にする方法を示す jsfiddle

すべてに影響するサブ選択の自動入力についてはどうすればよいですか?

これは簡単です。コードはすべてのサブ選択を明示的に参照します。あなたのコードが言っているのを見てください

$('.category-select-sub').show().html(subhtml);

このコードは、この HTML をすべての「.category-select-sub」要素に設定することを意味します。ただし、このクラスの特定の要素のみが必要です-すべてではありません..

作成したサブ選択のみを参照する必要があります-すでに参照しているので簡単です-したがって、成功関数は次のようになります。

$newselect.show().html(subhtml);
于 2013-01-25T03:47:48.670 に答える