プルダウンで選ぶと表示されるリストを作成したい

例えば、国名を選ぶと、その国の人口が表示されるUI。

html

<form>

<select id="country">

<option selected>国名をお選びください</option>

<option value="0">日本</option>

<option value="1">アメリカ</option>

<option value="2">中国</option>

<option value="3">インド</option>

</select>

</form>

<dl id="result">

<dt>日本</dt>

<dd>127,450,460</dd>

<dt>アメリカ</dt>

<dd>314,659,000</dd>

<dt>中国</dt>

<dd>1,338,299,500</dd>

<dt>インド</dt>

<dd>1,170,938,000</dd>

</dl>

css

dl#result dd{

display:none;

}

dl#result dt.show+dd,

{

display:block;

}

javascript

$(function(){

$('#country').change(function(){

var c = $('#country').val();

$('dl#result dt').eq(c).addClass('show').siblings().removeClass('show');

});

});

アンカーリンクが正しいポイントへ飛ばない（Firefox）

どうしてもうまくアンカーが効かない！

これが効かないとクライアントに怒られる！

そんなときはあるものです。

まずはアンカー地点のyの座標点を計測。

$(function(){

obj = document.getElementById('anc');

y = obj.offsetTop;

alert(y);

}

alertで表示された値が1866だったとします。

次に、URLにアンカー名（ここではanc）が含まれていた場合、

x:0,y;1886の地点にスクロールする

という記述を追加します。

$(function(){

url = document.URL;

if(url.match('#anc'))

scrollTo(0,1866);

});

※scrollTo(0,1866)の値は、微調整が必要な場合もあります。

容易に察しがつくかと思いますが、非常に強引な方法です。

本当に最終手段としてお使いください。

アンカーリンクが正しいポイントへ飛ばない（Firefox）

どうしてもうまくアンカーが効かない！
これが効かないとクライアントに怒られる！

そんなときはあるものです。

まずはアンカー地点のyの座標点を計測。

$(function(){
   obj = document.getElementById('anc'); 
   y = obj.offsetTop; 
   alert(y);
} 

alertで表示された値が1866だったとします。

次に、URLにアンカー名（ここではanc）が含まれていた場合、
x:0,y;1886の地点にスクロールする
という記述を追加します。

$(function(){
		url = document.URL;
		if(url.match('#anc'))
		scrollTo(0,1866);
	});

※scrollTo(0,1866)の値は、微調整が必要な場合もあります。

容易に察しがつくかと思いますが、非常に強引な方法です。
本当に最終手段としてお使いください。

プルダウンで選ぶと表示されるリストを作成したい

例えば、国名を選ぶと、その国の人口が表示されるUI。

html

<form>
<select id="country">
<option selected>国名をお選びください</option>
<option value="0">日本</option>
<option value="1">アメリカ</option>
<option value="2">中国</option>
<option value="3">インド</option>
</select>
</form>
<dl id="result">
		<dt>日本</dt>
		<dd>127,450,460</dd>
		<dt>アメリカ</dt>
		<dd>314,659,000</dd>
		<dt>中国</dt>
		<dd>1,338,299,500</dd>
		<dt>インド</dt>
		<dd>1,170,938,000</dd>
</dl>

css

dl#result dd{
	display:none;
	}

dl#result dt.show+dd,
{
	display:block;
}

javascript

$(function(){
	$('#country').change(function(){
		var c = $('#country').val();
		$('dl#result dt').eq(c).addClass('show').siblings().removeClass('show');
	});
});