javascriptにて質問です

質問

javascriptで、各項目に数字の範囲を指定して、入力フォームに半角数字を入力して、その入力した数字が範囲内にある項目のみが表示されて、範囲外の項目は表示されずに下の項目が繰り上がって表示される
みたいなことは可能でしょうか

例
項目A (1～100)
項目B (60～100)
項目C (30～70)
項目D (1～40)
項目E (50～50)

で、入力フォームに50を入力すると
項目A (1～100)
項目C (30～70)
項目E (50～50)
と言う風に50を範囲に含まないのが消えて、詰めて表示されるってのをやりたいんですが

回答No.3

yambejp · ベストアンサー

こんな感じでしょうか？

<script>
function onButtonClick(f){
var num = f.elements["textBox1"].value==="" ? null :(parseInt(f.elements["textBox1"].value));
var mylist=[
{name:"項目A",s_num:1,e_num:100},
{name:"項目B",s_num:60,e_num:100},
{name:"項目C",s_num:30,e_num:70},
{name:"項目D",s_num:1,e_num:40},
{name:"項目E",s_num:50,e_num:50}
];
var div=document.getElementById("display_mylist");
while(div.firstChild){div.removeChild(div.firstChild);}
var ul=document.createElement("ul");
for(var i=0;i<mylist.length;i++){
if(num==null || mylist[i]["s_num"]<=num && mylist[i]["e_num"]>=num){
var li=document.createElement("li");
li.appendChild(document.createTextNode(mylist[i]["name"]+"("+mylist[i]["s_num"]+"～"+mylist[i]["e_num"]+")"));
ul.appendChild(li);
}
}
div.appendChild(ul);
}
</script>
<div id="display_mylist"></div>
<form>
<input type="text" name="textBox1" value="">
<input type="button" value="決定" onclick="onButtonClick(this.form);">
</form>

お礼

ありがとうございます！
まさにやりたいと思っていたことそのままです！

何から何まで、感謝してもしきれません

回答No.2

Kaneyan-R

＞これを流用して、決定ボタンを押した時にテキストボックス内の数値を・・・

var num = document.getElementById('id_textBox1').value;

もしくは、

var objNum = document.getElementById('id_textBox1');
var num = objNum.value;

回答No.1

yambejp

<script>
var mylist=[
{name:"項目A",s_num:1,e_num:100},
{name:"項目B",s_num:60,e_num:100},
{name:"項目C",s_num:30,e_num:70},
{name:"項目D",s_num:1,e_num:40},
{name:"項目E",s_num:50,e_num:50}
];
//var num = null;
var num = 50;
for(var i=0;i<mylist.length;i++){
if(num==null || mylist[i]["s_num"]<=num && mylist[i]["e_num"]>=num){
document.write(mylist[i]["name"]+"("+mylist[i]["s_num"]+"～"+mylist[i]["e_num"]+")<br>");
}
}
</script>

numがnullの場合は全リストを返します

補足

回答ありがとうございます

1から10まで聞いてしまうような物ですが、var num = 50;の所にテキストボックスに入力した数値を取得するにはどのように記述すればよいのでしょうか
調べて試してみたんですけど、どうにも上手くいかなくて

<form name="form1" id="id_form1" action="">
<input name="textBox1" id="id_textBox1" type="text" value="" />
<input type="button" value="決定" onclick="onButtonClick();" />
</form>

これを流用して、決定ボタンを押した時にテキストボックス内の数値をvar num = 50;の所に取得して表示する項目を変えられるようにしたいのですが