WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:Javascriptでページ内の表示を変える

0:[投稿] ジュン [2006/03/09 15:27 ] [環境:IE, Sarari - MacOSX わからない]

「Javascript小技集」というところで見つけたのですが、
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!-- JavaScript小技集 2005. 6.17
function showthis(obj) {
  if(!obj) return false;
  if(document.getElementById) {
     document.getElementById("item1").style.display = "none";
     document.getElementById("item2").style.display = "none";
     document.getElementById("item3").style.display = "none";
     document.getElementById(obj).style.display = "block";
  } else {
     return false;
  }
}
// -->
</script>
<style type="text/css">
#item1,#item2,#item3 {
  display: none;
}
</style>
</head>
<body>
<form>
<select onchange="showthis(this.value)">
<option selected="selected">記事を選ぶ</option>
<option value="item1">記事1</option>
<option value="item2">記事2</option>
<option value="item3">記事3</option>
</select>
</form>
</body>
<html>

というものでページ内のアイテムを表示させたり隠したりしているのですが、
一度に複数のアイテムを選ぶことはできないものでしょうか。
例えばメニューから記事1と3だけを表示、とか2と3を表示とか。

valueを"item1 + item3"とか"item1,item2"などとしても動作しません。
見当違いのことをしている気がします。

どなたか良い考えはありませんか。よろしくお願いします。


1:[回答] m035 [2006/03/09 15:44 ][URL]

"item1,item2"
のようにvalueを複数指定の場合、カンマで区切って入力で出来るサンプルが以下です。

<html>
<head>
<script type="text/javascript" language="JavaScript">
<!-- JavaScript小技集 2005. 6.17
function showthis(obj) {
 if(!obj) return false;
 if(document.getElementById) {
    document.getElementById(obj).style.display = "block";
 } else {
    return false;
 }
}
function spvalue(str){
   if(document.getElementById) {
       document.getElementById("item1").style.display = "none";
       document.getElementById("item2").style.display = "none";
       document.getElementById("item3").style.display = "none";
   }
   if(str.indexOf(",")!=-1){
       str=str.split(",");
       for(var i=0;i<str.length;i++)showthis(str[i]);
   }
   else{
       showthis(str);
   }
}
// -->
</script>
<style type="text/css">
#item1,#item2,#item3 {
 display: none;
}
</style>
</head>
<body>
<form>
<select onchange="spvalue(this.value)">
<option selected="selected">記事を選ぶ</option>
<option value="item1,item2">記事1,2</option>
<option value="item2,item3">記事2,3</option>
<option value="item3">記事3</option>
</select>
</form>
<div id="item1">item1</div>
<div id="item2">item2</div>
<div id="item3">item3</div>
</body>
<html>


2:[回答] ジュン [2006/03/09 18:33 ][URL]

m035さん、ありがとうございます!!

まさにこれが使いたかったものです。もしよければ、選択するものを3つ、4つ、5・・・と増やしていく場合にどこを変えれば良いのか、それから全部の記事を表示するメニューを作る場合も教えていただけませんか?


3:[回答] m035 [2006/03/09 20:37 ][URL]

value="item1,item2"

value="item1,item2,item3"
とか
value="item1,item2,item3,item4"
とか、カンマで区切って設定すればいくらでもまとめて表示できます。
全部表示したければ、valueにすべてのアイテムを指定すればいいはずです。
表示するアイテムはstyleの
#item1,#item2,#item3 {
display: none;
}
の#item1,#item2,#item3を#item1,#item2,#item3,#item4のようにカンマ区切りで#item番号を追加するだけです。
body内はitem4を追加する場合は
<div id="item4">item4</div>
を追加します。
<div id="item番号">内容</div>
と言う形です。


4:[回答] ジュン [2006/03/09 21:06 ][URL]

できました!!
本当にありがとうございました。


5:[完了] ジュン [2006/03/09 21:41 ]

すみません、状態を「完了」にすれば良いのですね。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]