WEB相談室

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

タイトル:条件を絞り込みジャンプさせたい。

0:[投稿] みつか [2010/04/08 13:14 ] [環境:IE6〜8,Firefox,Safari わからない]

初めて相談させて頂きます。
Javascript初心者です。私はWin XPを使っています。ネットで調べて2つの条件を絞り込みジャンプさせることは出来たのですが、これを3つの条件で行いたいのです。例を言うと現在は、メーカーを選び、次に製品名を選んでジャンプさせています。これをメーカー、製品名、品番を選んでそのページにジャンプさせたいのです。
また、ブラウザは、IEとFirefox,Safari等でも使えればと思っていいます。
いろいろ調べているのですが、初心者ゆえ苦しんでいます。どなたか教えて頂けないでしょうか。宜しくお願い致します。

ちなみに現在のソースは以下の様になります。

<HTML>
<HEAD>
<TITLE>item search</TITLE>
</HEAD>
<BODY>
<script language="JavaScript"><!--
menuT=[ ["----"],["製品名を選んで下さい","A-1","A-2","A-3"],["製品名を選んで下さい","B-1","B-2","B-3"],["製品名を選んで下さい","C-1","C-2","C-3"],["製品名を選んで下さい","D-1","D-2","D-3"]];
menuX=[ [""],["","A-1.html","A-2.html","A-3.html"],["","B-1.html","B-2.html","B-3.html"],["","C-1.html","C-2.html","C-3.html"],["","D-1.html","D-2.html","D-3.html"]];

function set(n){
document.form.push.disabled=true;
obj=document.form.sel2;
for(i=obj.length; i>=0;i--){ obj.options[i]=null;}

for(i=0;i<menuT[n].length;i++){
obj.options[i] = new Option(menuT[n][i],menuX[n][i]);
}
}

function pushon(){
document.form.push.disabled=false;
if(document.form.sel2.value==""){document.form.push.disabled=true;}
}

function url(){
location.href=document.form.sel2.value;
}
// --></script>

<div id="selectbox">
<form name="form">
<select name="sel1" onChange="set(this.selectedIndex)" style="width:200px;">
<option value="">メーカー名を選んで下さい</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<select name="sel2" onChange="pushon()" style="width:200px;">
<option>----</option>
</select>

<input type="button" name="push" value="Jump!" disabled onClick="url()"><input type="reset">
</form>
</div>
</div>
</BODY>
</HTML>


1:[回答] てけてん [2010/04/12 15:25 ]

ご提示されたスクリプトとは違うものですが、検索で見つけた
http://okwave.jp/qa/q3993831.html
を参考に、作成してみました(と言っても、殆ど、上記ページのスクリプトのままですが(^^;)。
selectの値の指定は、多次元連想配列になっていますので、設定しやすいのではないでしょうか。
動作環境は、WindowsXP、IE6sp2、Firefox3.5.7、Opera9.27で、動作するのを確認しています。


<html>
<head>
<style>
select{
width:200px;
}
.s3{
}
</style>
<script type="text/javascript">
<!--
var data={

メーカーA:{
A製品名1:{
品番1:{0:"1.html"}
,品番2:{0:"2.html"}
}
,A製品名2:{
品番3:{0:"3.html"}
,品番4:{0:"4.html"}
}
,A製品名3:{
品番5:{0:"3.html"}
,品番6:{0:"4.html"}
}
}

,メーカーB:{
製品名4:{
品番7:{0:"5.html"}
,品番8:{0:"6.html"}
}
,製品名5:{
品番9:{0:"7.html"}
,品番10:{0:"8.html"}
}
,製品名6:{
品番11:{0:"9.html"}
,品番12:{0:"10.html"}
}
}

,メーカーC:{
製品名7:{
品番13:{0:"11.html"}
,品番14:{0:"12.html"}
}
,製品名8:{
品番15:{0:"13.html"}
,品番16:{0:"14.html"}
}
,製品名9:{
品番17:{0:"15.html"}
,品番18:{0:"16.html"}
,品番19:{0:"17.html"}
}
}


/* 説明
  以下、増やす場合はこのような形で増やす

,セレクト1で選択する項目:{
セレクト2で選択する項目の1個目:{
セレクト3で選択する項目の1個目:{0:"移動したいページのhtmlファイル"}
,セレクト3で選択する項目の2個目:{0:"移動したいページのhtmlファイル"}
}
,セレクト2で選択する項目の2個目:{
セレクト3で選択する項目の1個目:{0:"移動したいページのhtmlファイル"}
,セレクト3で選択する項目の2個目:{0:"移動したいページのhtmlファイル"}
,セレクト3で選択する項目の3個目:{0:"移動したいページのhtmlファイル"}
}
}

説明ここまで */

};


var link;
window.onload=function(){
s0=document.getElementById("s0");
s1=document.getElementById("s1");
s2=document.getElementById("s2");

setSelect(data,s0);

s0.onchange=function(){
clearSelect(s2);
clearLink();
if(this.value==""){
clearSelect(s1);
}else{
setSelect(data[this.value],s1);
}
}
s1.onchange=function(){
clearLink();
if(this.value==""){
clearSelect(s2);
}else{
setSelect(data[s0.value][this.value],s2);
}
}
s2.onchange=function(){
if(this.value==""){
clearSelect(s2);
}else{
document.form.push.disabled=false;
if(this.value==""){clearLink();}
var url=data[s0.value][s1.value][this.value];
link=url[0];
}
}
}

function setSelect(obj,sel){
while(lc=sel.lastChild){
sel.removeChild(lc);
};
var op=document.createElement("option");
op.setAttribute("value","");
op.appendChild(document.createTextNode("▼選択してください"));
sel.appendChild(op);
for(var i in obj){
var txt=(typeof obj[i]=="object")?i:obj[i];
var op=document.createElement("option");
op.setAttribute("value",i);
op.appendChild(document.createTextNode(txt));
sel.appendChild(op);
}
}

function clearSelect(sel){
while(lc=sel.lastChild){
sel.removeChild(lc);
};
var op=document.createElement("option");
op.appendChild(document.createTextNode("---------------"));
sel.appendChild(op);
};

function clearLink() {
link="";
document.form.push.disabled=true;
}

function url(){
location.href=link;
}

//-->
</script>
</head>

<body>
<form name="form">
<select id="s0">
<option value="">▼選択してください</option>
</select>
<select id="s1">
<option value="">---------------</option>
</select>
<select id="s2">
<option value="">---------------</option>
</select>
<input type="button" name="push" value="Jump!" disabled onClick="url()"><input type="reset">
</form>
</body>
</html>


2:[回答] みつか [2010/04/14 20:04 ]

てけてん様
返事が遅くなりました事をお許し下さい。
作動確認しました。エラーの発生無く、快適に動きました!
本当に有難うございました!大変助かりました!
ところで、このプログラムは、今後メーカー名、製品名、の増加、それに伴う品番の増加に限界は有るのでしょうか?とりあえず、メーカー名は10数社になる見込みなのですが。


3:[回答] てけてん [2010/04/14 21:08 ]

> ところで、このプログラムは、今後メーカー名、製品名、の増加、それに伴う品番の増加に限界は有るのでしょうか?

う〜ん、どうなんでしょう。
桁違いに多いなら別ですが、大抵は大丈夫じゃないでしょか。
実際に、動作確認を行ってみて、判断するしかないと思います。


4:[完了] みつか [2010/04/15 13:26 ]

てけてん様
分かりました。有難うございます。

てけてん様のお蔭様で、早く疑問が解決出来ました。これで私の理想的なものが
出来そうです。今回は、大変お世話になり有難うございました。
また何かありましたら宜しくお願い致します。


回答(必須): 状態:

お名前(必須):

URL:




[戻る]