2011-02-08 20 views
4

現在、私は何年も標準の選択入力を持っています。現在、クリックすると、1900年から2000年までの長いリストが表示されます。入力タグを選択 - クリック時に中間日付を選択します

クリックしたときに真ん中に表示されるようにする方法がありますので、上下にスクロールできますか?

私はこれが意味をなさないことを願っています!

+1

中間値をデフォルトで選択するか、スクロールボックスをその下に表示するのではなく、その上と下に表示するかどうかを指定しますか? – Benubird

+0

正しい:選択要素の上下に表示されるスクロールボックス。 – amaseuk

+0

おおよそ途中であれば大丈夫でしょうか? (最悪の場合、10回オフ) – Knu

答えて

2

使用selected属性

<select name="years"> 
    <option>1900</option> 
    <option>1901</option> 
    <option>1902</option> 
    <option>1903</option> 
    <option>1904</option> 
    <option selected="selected">1905</option> 
    <option>1906</option> 
    <option>1907</option> 
    <option>1908</option> 
    <option>1909</option> 
    <option>1910</option> 
    </select> 

例:http://jsfiddle.net/tnU4K/

+0

このアプローチの大きな欠点は、デフォルトで有効な値が選択されるため、この入力を強制することができないことです。 –

+0

@Andy Eはい。もう1つの選択肢は、一般的なテキストで非年の値を持つことであり、ユーザーがクリックしてjavascript – Sotiris

0

がどこか、デフォルトで選択されたミドル(多分1950年)を中心に値を確認します。誰かが選択をクリックすると、選択した値が表示されるので、上または下にスクロールできます。

1

ドロップダウンの場合<select>要素ですか?標準化されたクロスブラウザーではありません。一部のブラウザ(テストされていない)は、リストが表示されている間にselect要素のscrollTopプロパティを操作することを許可しますが、私はそれを信じません。途中で開始する唯一の方法は、デフォルトで中年が選択されていることです。

個人的には、私は気にしません。ほとんどのユーザーは、<select>要素をとにかく集中しながら入力できることを知っています—ドロップダウンのオプションを選択するのにマウスを使用することはめったにありません<select>

0

あなたはいつも豚の野生に行くとjQueryを使用して、このような何かを行うことができます:

//get number of options 
var optCount = $('#example option').length; 
//divide by 2 and round up for odd numbers 
var midPoint = Math.round(optCount/2); 
//select that index item 
$("#example option:eq(midPoint)").attr("selected", "selected"); 

私がテストしていないが、それは動作するはずです。

関連する問題