jquery - Jqueryリスト要素を制限し、後に最初の子を非表示にします

Question

私が達成したいのは、10個のリスト項目を表示し、次のリスト要素をクリックして最初の要素を非表示にすると、リストには常に10個の要素が表示されることです

HTML

<div id="showMY">
   <ul>
   </ul>​
</div>

Jクエリ

    $("#dropList").on("change", function () {

        var dropValue = $("#dropList").val();

        $.get("getValues.php", 
        { 
            a: dropValue
        },
        function(data)
        {
            $("#showMY").append(data);


        });

    });

そして返される値は

<li><a href="#">Value</a></li>

前もって感謝します ;）

Answer 1

これでうまくいくはずです：

HTML:

<select id="dropList">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
    <option value="item4">item4</option>
    <!-- etc -->
</select>

<ul id="showMY">
</ul>

JS:

$(function() {
    $("#dropList").change(function() {
        var value = $("#dropList").val();
        $.get("getValues.php", {a: value}, function(data) {
            $("#showMY").append('<li><a href="#">' + data + '</a></li>');
            if($("#showMY li").length > 10) {
                $("#showMY li:first:visible").hide();
            }
        });
    });
});

Answer 2

次のコードを使用してこれを実現できます

HTML:

<select id="drop">
    <option val="item 11"></option>
        <option val="item 12">item 12</option>
        <option val="item 13"> item 13</option>
        <option val="item 14">item 14</option>
        <option val="item 15">item 15</option>
        <option val="item 16">item 16</option>
        <option val="item 17">item 17</option>
        <option val="item 18">item 18</option>
        <option val="item 19">item 19</option>
        <option val="item 20">item 20</option>

</select>

<ul id="container">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>

jQuery:

$('#drop').on('change',function(){
   var dropVal = $(this).val();
   $('ul#container li:visible').first().hide();
    $('ul#container').append("<li> "+ (dropVal) +" "); 
});

$.getコードに呼び出しを追加することで、ニーズに合わせて変更できます。

働くフィドル