複数の<option>と一致するものを表示するには
サンプルで作ったコードは、
<select name="select1">の<option>、
<select name="select2">の<option>、
<select name="select3">の<option>で選び、その下にあるボタンを押すと、
<div class="sample_in">の<dd>タグ内と上記３つの項目に一致するにものだけを表示させたい
と考え下記コードを作りました。しかし、select1とselect2は処理が行われません。
select3のみが処理されてしまいます。例えば・・・
「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは１つしかないので
その親である<div class="sample_in">のみを表示させたいですが、
2組、女子でも表示の対象になり、一致するものが２つになってしまいます。
解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>サンプル</title>
<style type="text/css">
#mainBox {
width: 300px;
border: 3px solid black;
padding: 10px;
}
.sample_in {
width: 250px;
border: 1px solid SteelBlue;
padding: 10px;
margin: 20px;
}
.sample_in dt {
color: Magenta;
}
</style>
</head>
<body>
<form name="myForm" action="#">
<select name="select1">
<option value="指定なし" selected="selected">指定なし</option>
<option value="1組">1組</option>
<option value="2組">2組</option>
<option value="3組">3組</option>
</select>
<select name="select2">
<option value="指定なし" selected="selected">指定なし</option>
<option value="男子">男子</option>
<option value="女子">女子</option>
</select>
<select name="select3">
<option value="指定なし" selected="selected">指定なし</option>
<option value="おとなしい">おとなしい</option>
<option value="活発">活発</option>
<option value="普通">普通</option>
</select>
<input type="button" value="OK" onclick="test0()">
</form>
<div id="sample">
<div class="sample_in">
<dl><dt>組名</dt><dd>2組</dd></dl>
<dl><dt>性別</dt><dd>女子</dd></dl>
<dl><dt>性格</dt><dd>おとなしい</dd></dl>
</div>
<div class="sample_in">
<dl><dt>組名</dt><dd>1組</dd></dl>
<dl><dt>性別</dt><dd>女子</dd></dl>
<dl><dt>性格</dt><dd>普通</dd></dl>
</div>
<div class="sample_in">
<dl><dt>組名</dt><dd>1組</dd></dl>
<dl><dt>性別</dt><dd>男子</dd></dl>
<dl><dt>性格</dt><dd>おとなしい</dd></dl>
</div>
<div class="sample_in">
<dl><dt>組名</dt><dd>2組</dd></dl>
<dl><dt>性別</dt><dd>女子</dd></dl>
<dl><dt>性格</dt><dd>活発</dd></dl>
</div>
<div class="sample_in">
<dl><dt>組名</dt><dd>2組</dd></dl>
<dl><dt>性別</dt><dd>男子</dd></dl>
<dl><dt>性格</dt><dd>活発</dd></dl>
</div>
<div class="sample_in">
<dl><dt>組名</dt><dd>1組</dd></dl>
<dl><dt>性別</dt><dd>男子</dd></dl>
<dl><dt>性格</dt><dd>普通</dd></dl>
</div>
</div>
<script type="text/javascript">
function test0() {
var div1 = document.getElementById('sample');
var div2 = div1.children;
var index1 = document.myForm.select1.selectedIndex;
var index2 = document.myForm.select2.selectedIndex;
var index3 = document.myForm.select3.selectedIndex;
var str1 = document.myForm.select1.options[index1].text;
var str2 = document.myForm.select2.options[index2].text;
var str3 = document.myForm.select3.options[index3].text;
var ary = [str1, str2, str3];
for(m=0; m<ary.length; m++){
for(i=0, len1=div2.length; i<len1; i++){
var dd = div2[i].getElementsByTagName("dd");
for(j=0, len2=dd.length; j<len2; j++){
var ddText = dd[j].textContent;
if( ary[m] == ddText ){
dd[j].parentNode.parentNode.style.display = '';
break;
}else{
dd[j].parentNode.parentNode.style.display = 'none';
}
}
}
}
alert("エラーなし"); //動作確認用
}
</script></body></html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございます。 一括でアップロードはドリィームウィーバーで出来ます。 今回はＣＳＶに一括で取り込み その後、ＣＳＶファイルを１ファイルだけアップロードしたいのでちょっと求めている情報とは違うと思いました。 でも、丁寧にフリーも教えていただけ、親切にしてもらい感謝しております。ありがとうございます。