0

選択した結果を横に表示する選択ドロップダウンを作成し、「結果」を先頭に追加します (フォーム入力のラベルに似ています)。

また、選択の下に「別の追加」ボタンがあり、クリックすると別の「結果」div が追加され、ユーザーは同じドロップダウンから選択して新しい結果を表示できます (解決済み)。

さらに、カスタム オプションを選択すると、2 つの入力 (高さと幅) を持つ div が表示されます (解決済み)。

要素のクローンを作成して、乗算せずに追加するのに問題があります(解決済み)。

また、カスタムオプションが選択されている場合、高さと幅を表示するdivを取得しようとしていますが、なぜ機能しないのかわかりません(解決済み)。

[別の追加] ボタンから作成された新しい結果スパンに結果を表示する方法はありますか? 選択肢がすべての結果を更新するか、最初の結果のみを更新するというエラーが発生し続けます。

これまでのところ、私はこれを持っています:

フィドル

HTML

<div id="exp-display-choice">
    <div class="exp-choices">
        <ul class="choices">
            <p class="results">Results:<span class="pet_select"></span>  <span class="transportation_select"></span></p>
        </ul>
        <ul class="ad-choices">
            <li>
                <select class="select" name="pet_select">
                    <option value="" selected>Choose Your Pet</option>
                    <option value="Cat">Cat</option>
                    <option value="Dog">Dog</option>    
                    <option value="Wookie">Wookie</option>  
                </select>
            </li>
            <li>
                <select class="ad-size select full-width" name="transportation_select">
                    <option value="" selected>Choose Transportation</option>
                    <option value="Planes">Planes</option>
                    <option value="Trains">Trains</option>
                    <option class="custom" value="Custom">Custom</option>                           
                </select>
            </li>
        </ul>
    </div><!-- end of exp-choices -->
</div><!-- end of exp-display-choices -->

<a href="javascript:void(0);" class="add-btn button">Add another</a>        

<div style="display: none;">
    <p>Width:</p>
      <input type="text" name="name" id="name" class="input custom-input" maxlength="10">
    <p>Height:</p>
      <input type="text" name="name" id="name" class="input custom-input" maxlength="10">
</div>

Jクエリ

$(document).ready(function(){   

    // Show Custom Ad Input fields
    $(".ad_size_select").change(function(){
    if ($(".ad_size_select").val() == "custom") 
    {
       //alert('test');
       // show custom-size fields
       $('.custom-size').show();

    } else {
       // hide the custom-size fields
       $('.custom-size').hide();
        }
    });

    // Add another results when button is clicked
    $(".add-btn").click(function() 
    {   
        var $newAddChoices = $('.results').last().clone().appendTo($($('.results')));
        $newAddChoices.find('.pet_select').text('');
        $newAddChoices.find('.transportation_select').text('');
        $('.exp-choices').on('change', "select", function(){
            displayAds($(this));
        });
    });

    $('.exp-choices').on('change', "select", function(){
        displayAds($(this));
    });
});

function displayAds($current_select) 
{
    var adChoice = $current_select.val();
    $current_select.closest('.exp-choices').find('.' + $current_select.attr("name")).text(adChoice)

}
4

1 に答える 1

0

問題はこの行です

// Add another results when button is clicked
$(".add-btn").click(function() 
{   
    // THIS line you clone last `.results` and append `into` `.results`
    // It should append to its `parent` instead.
    var $newAddChoices = $('.results').last().clone().appendTo($($('.results')));
    $newAddChoices.find('.pet_select').text('');
    $newAddChoices.find('.transportation_select').text('');
    $('.exp-choices').on('change', "select", function(){
        displayAds($(this));
    });
});

に変更して、FIDDLEを見てください:)

$(".add-btn").click(function() 
{   
    // You should append it to `parent` of `.results`
    var $newAddChoices = $('.results:last').clone().appendTo($('.results').parent());
    $newAddChoices.find('.pet_select').text('');
    $newAddChoices.find('.transportation_select').text('');
    $('.exp-choices').on('change', "select", function(){
        displayAds($(this));
    });
});
于 2013-10-03T04:49:51.317 に答える