0

申し訳ありませんが、まだ JQuery に夢中です。このような選択可能なulliリストを作成するのに非常に役立ちました

$(document).ready(function(){

    $('.selectoption li').not(':first').hide();

    $('.prev, .next').click(function() {
        // Determine the direction
        var dir = $(this).hasClass('prev') ? 'prev' : 'next';
        // Get the li that is currently visible
        var current = $('.selectoption li:visible');

        // Get the element that should be shown next according to direction
        var next = dir == 'prev' ? current.prev('li') : current.next('li');

        // If there's no more in that direction, select first/last
        if(next.size() == 0) {
            next = dir == 'prev' ? $('.selectoption li:first') : $('.selectoption li:first');
        }

        // Hide them all..
        $('.selectoption li').hide();
        // And show the new one
        next.show();

        return false;
    });

});

しかし、選択したliの値をテキストフィールドに追加して、フォーム内で使用できるようにするにはどうすればよいですか.liリストがフォームの外にあるため、この機会にAjaxなどを使用することはできません.

また、ページにこれらのulliが3つまたは4つある場合、次/前のボタンがそれらが適用されるulliでのみ機能するように上記のコードをラップするにはどうすればよいですか。

前もって感謝します

4

2 に答える 2

1

あなたが探しているものを完全に理解しているかどうかはわかりませんが、より一般的な意味でこれに対処します。

$("li").click(function(){
  // Place LI text as value of <input type="text" name='fname' />
  $(":input[name='fname']").val($(this).text());
});

セレクターでアドレス指定する UL に関してコードをより制限的にするには、次のようにします。

<ul>
  <li class="selectOption">Ignore Me</li>
</ul>
<ul>
  <li class="selectOption">Include Me</li>
</ul>

以下を使用できます。

$("ul:eq(1) .selectOption").click(function(){
  // only the LI in the second UL will trigger this
});

ゼロベースのインデックスを扱っていることに注意してください。したがって、「1」を使用して 2 番目の順序付けられていないリストを指定します。

于 2010-01-15T12:55:30.980 に答える
0

私はあなたがここで何を求めているか理解していると思いますが、私は間違っている可能性があります。私がそうすると仮定すると、要素間のリンクを表すためにクラスまたはIDを追加します。例えば：

<input type="hidden" name="degree" id="degree" />
<div id="degree_selectable_control" class="selectable_control">
    <a href="#" class="prev">Prev</a> |
    <a href="#" class="next">Next</a>
</div>
<ul id="degreee_selectable" class="selectable">
    <li>Associates</li>
    <li>Bachelor's</li>
    <li>Graduate</li>
    <li>Other</li>
</ul>

<input type="hidden" name="salary" id="salary" />
<div id="salary_selectable_control" class="selectable_control">
    <a href="#" class="prev">Prev</a> |
    <a href="#" class="next">Next</a>
</div>
<ul id="salary_selectable" class="selectable">
    <li>> $20,000</li>
    <li>$20,000 - $35,000</li>
    <li>$35,000 - $50,000</li>
    <li>< $50,000</li>
</ul>

次に、既存のJavaScriptを次のようにリファクタリングできます。

$(document).ready(function(){
    // init the selectables
    $('.selectable').each(function(){
        $(this).find('li').not(':first').hide();
    });
    // assign the handlers for each control
    $('.selectable_control').each(function(){
        var field_id = this.id.replace(/_selectable_control$/, ''),
            $selectable = $('#' + field_id + '_selectable'),
            $field = $('#' + field_id);

        $(this).find('.prev, .next').click(function(){
            // Determine the direction
            var dir = $(this).hasClass('prev') ? 'prev' : 'next';
            // Get the li that is currently visible
            var current = $selectable.find('li:visible');

            // Get the element that should be shown next according to direction
            var next = dir == 'prev' ? current.prev('li') : current.next('li');

            // If there's no more in that direction, select first/last
            if(next.length === 0) {
                next = dir == 'prev' ? $selectable.find('li:last') : $selectable.find('li:first');
            }

            // Hide them all..
            $selectable.find('li').hide();
            // And show the new one
            next.show();
            // And update the corresponding field
            $field.val( next.text() );

            return false;
        });
    });
});

最終的には、コントロールブロック、選択可能ファイル、およびフィールドをグループ化して、選択した値を必要に応じて保存できるようになります。

于 2010-01-15T14:57:44.390 に答える