WEB相談室

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

タイトル:コンボボックスを使いたい

0:[投稿] 紅葉 [MAIL] [URL] [2002/10/24 15:32 ][環境:WIN+NN UNIX系+C]

先にプルダウン式の選択を連動させて画像を選択表示することでお世話になりました。西暦(1700-1880)の部分だけはInputで入れていたのですが、ここだけをコンボボックスに変更したいのです。(仕様としては、デフォルテで年を与えて表示させておくが、必要に応じbutton-up buttondownをクリックすることにより検索の年を変える、大きく飛ぶときは年号を4文字書き換える。月旬に関しては、そのまま使う)フォームの中にボタンを押した場合のオブジェクトを入れるのだろうと想像しているのですが、浅学で要領が掴めません。コンボボックスと称して実はプルダウンメニューを使っている例は見るのですが、そもそも無理、需要がない?
 現在のものは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>メニュー</TITLE>
</HEAD>
<body BACKGROUND="image/bk4.gif">
<script language="JavaScript">
<!--
function drweather(formobj, targetframe){
 var dw1;
 var year=formobj.year.value;
 var month=formobj.month.value;
 var period=formobj.period.value;
 var imagefile=year+"/"+ year+ "-" + month + period +".png";
 dw1=window.open("",targetframe);
 dw1.document.open();
 dw1.document.write("<html lang='ja'><head>");
 dw1.document.write("<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>");
 dw1.document.write("<title>Weather Map</title></head><body>");
 dw1.document.write("<body BACKGROUND=image/bk4.gif>");
 dw1.document.write("<body><img src='image/"+imagefile+"'>");
 dw1.document.write("</body></html>");
 dw1.document.close();
 return false;
}
//-->
</script>
<pre><font><font size="3" color="#cc00cc">1700-1870年までの年を記入し
月・旬を選び、[表示]ボタンを
押してください。</font></pre>
<form name="form1" onsubmit="return drweather(this, 'weather')">
 <input name="year" size="6">
<small> 年 </small>
<select name="month">
   <option value="01">1月</option>
   <option value="02">2月</option>
   <option value="03">3月</option>
   <option value="04">4月</option>
   <option value="05">5月</option>
   <option value="06">6月</option>
   <option value="07">7月</option>
   <option value="08">8月</option>
   <option value="09">9月</option>
   <option value="10">10月</option>
   <option value="11">11月</option>
   <option value="12">12月</option>
 </select>
 <select name="period">
   <option value="a">上旬</option>
   <option value="b">中旬</option>
   <option value="c">下旬</option>
 </select>
 <input type="submit" value="表示">
<hr width="50%" size="2" color="#c0c0c0">

</form>

<P>
<FONT SIZE="2">天気記号(拡大されています)</FONT><BR>
<P aligin="CENTER"><IMG SRC="image/tkigo3.png"</P>
<hr width="50%" size="2" color="#c0c0c0">
<pre><small>天気図表示を終わる場合は右上の×を使う</small></pre>
</body>
</HTML>
    です。


1:[回答] Malic [2002/10/24 15:59 ]

コンボボックス って、 プルダウンのように選択ができて、さらにテキストフィールドのような入力も可能なものの事を指しているのですか?

僕の知る限り、HTMLやJavaScriptのみでは不可能です。


2:[回答] 紅葉 [MAIL] [URL] [2002/10/24 16:13 ]

お世話になります。
イメージしているのはその部分でselect文をつかう必要はありません。デフォルテの値を表示しておいて、矢印(上向き、下向き)を一回クリックするとその値が1増える(減る)、数字をたとえば1桁以上かえるような時は、テキストフィールドを書き換える。これで選択と同じことにする。これはLinuxとPHPの世界なのですか。


3:[回答] Malic [2002/10/24 17:38 ]

body内
<input type="button" value="1年プラス" onClick="plusyear(this);">
<input type="button" value="1年マイナス" onClick="minusyear(this)">

head内 関数追加

function plusyear(formobj){
formobj.year.value = eval(formobj.year.value) + eval(1);
}

function minusyear(formobj){
formobj.year.value = formobj.year.value - 1;
}

足し算の場合は、eval などの関数で数値と認識させましょう。
(これを行わないと、足し算の場合のみ文字列扱いされます・・
文字列の扱いだと、1800+1 が18001になります。)

引き算は普通に書けます。


4:[回答] ween [2002/10/24 17:57 ]

> 足し算の場合は、eval などの関数で数値と認識させましょう。
値を数値型に型変換する演算子を使えばいいわけなので

<input type="button" value="-" onclick="this.form.year.value--">
<input type="button" value="+" onclick="this.form.year.value++">

なんてのもアリですかね。


5:[保留] 紅葉 [MAIL] [URL] [2002/10/24 18:10 ]

ありがとうございます。早速試してみます。といっても私のこと
ですので、すぐに直せる訳でなく、いろいろ考えながら直します
来週までかかるかもしれません。結果が出たらご報告いたします。


6:[回答] Malic [2002/10/25 11:27 ]

あとは、yearに数値以外が入力されてたら、エラーでも表示すればおけ。 evalの場合は、エラー回避をして置きましょう。

function plusyear(){
 if (isNaN(document.HOST.year.value) == false){
   document.HOST.year.value = eval(document.HOST.year.value) + eval(1);
 }else{
   alert("年に数値以外を入力しないでね");
 }
}

インクリメントと引き算の方は、数値以外でもエラーにならずに NaN が返りますので、エラーチェック不要です。
(単純に1の増(減)のみならインクリメント(デクリメント)の方がいいみたい)


7:[保留] 紅葉 [MAIL] [URL] [2002/10/25 15:07 ]

重ね重ねありがとうございます。じつは昨夜からは他の締め切り
に追われて、進んでいません。結果が出たところでご報告いたします。


8:[回答] [2002/10/25 23:39 ]

http://board.allabout.co.jp/board+whole+javascript.abc?seq=796


9:[質問] 紅葉 [MAIL] [URL] [2002/10/28 13:05 ]

今朝までの結果をご報告いたします。不勉強をさらけ出して、恐縮ですが、助言をいただけたら幸いです。以下書き換えたものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>メニュー</TITLE>
</HEAD>
<script langueges="JavaScript">
<!--
function plusyear(formobj){
formobj.year.value = eval(formobj.year.value)+ eval(1);
}
function minusyear(formobj){
formobj.year.value=(formobj.year.value)-1;
}
function drweather(formobj.targetframe){
 var dw1;
 var year=formobj.year.value;
 var month=formobj.month.value;
 var period=formobj.period.value;
 var imagefile=year+"/"+ year+ "-" + month + period +".png";
 dw1=window.open("",targetframe);
 dw1.document.open();
 dw1.document.write("<html lang='ja'><head>");
 dw1.document.write("<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>");
 dw1.document.write("<title>Weather Map</title></head><body>");
 dw1.document.write("<body BACKGROUND=image/bk4.gif>");
 dw1.document.write("<body><img src='image/"+imagefile+"'>");
 dw1.document.write("</body></html>");
 dw1.document.close();
 return false;
}
//-->
</script>
<body BACKGRAUND="image/bk4.gif">
<pre><font><font size="3" color="#cc00cc">1700-1870年までの年を記入し
月・旬を選び、[表示]ボタンを
押してください。</font></pre>
<form name="form1" onsubmit="return drweather(this, 'weather')">
<td><input type=text name="year" value="1800" size=4 maxlength=4>
<input type="button" value="-" onClick="this.form.year.value--">
<input type="button" value="+" onClick="this.form.year.value++">

<td> 年</td>
 <select name="month">
   <option value="01">1月</option>
   <option value="02">2月</option>
   <option value="03">3月</option>
   <option value="04">4月</option>
   <option value="05">5月</option>
   <option value="06">6月</option>
   <option value="07">7月</option>
   <option value="08">8月</option>
   <option value="09">9月</option>
   <option value="10">10月</option>
   <option value="11">11月</option>
   <option value="12">12月</option>
 </select>
 <select name="period">
   <option value="a">上旬</option>
   <option value="b">中旬</option>
   <option value="c">下旬</option>
 </select>
<pre>  <input type="submit" value="表示"></pre>
<hr width="50%" size="2" color="#c0c0c0">
</form>

<FONT SIZE="2">天気記号(拡大されています)</FONT><BR>
<P aligin="CENTER"><IMG SRC="image/tkigo3.png"></P>
<hr width="50%" size="2" color="#c0c0c0">
<pre><small>天気図表示を終わる場合は右上の×を使う</small></pre>
</body>
</HTML>
これで3つばかり問題がでました。
親フレームのバックが表示されなくなりました。(書く位置変更)
年4桁を確保してあるのだが、3文字しか表示されない(ボタン
にスペースをとられるため?)
子フレームに画像が表示されない(バックも指定した画像も)


10:[回答] Malic [2002/10/28 14:20 ]

(子)フレーム →(子)ウインドウ

1.子ウインドウに、bodyタグが多すぎます。(汗)

dw1.document.write("<title>Weather Map</title></head><body>");
dw1.document.write("<body BACKGROUND=image/bk4.gif>");
dw1.document.write("<body><img src='image/"+imagefile+"'>");

2.ボタンにインクリメント使うなら、plusyear、minusyearの関数は不要。(呼ばれていません)

3. >年4桁を確保してあるのだが、3文字しか表示されない(ボタンにスペースをとられるため?)

ブラウザがネスケなら4桁見えるはずです。(環境がwin+NNを指定して質問されているので、問題ないとおもうのですが)

仮にIE使用なら、input の size は大き目に取らないと全桁表示しません・・・(これ不便なのに、IEがバージョンアップされても解消しない) size=6 を4に変えたからでしょう。

4.親ウインドウの背景 ・・・ background のつずりミス。

いじょ。


11:[回答] Malic [2002/10/28 14:25 ]

追加1点

動作不良とは関係ないと思うけど・・・
スクリプトの関数(群)は<head>〜</head>内に書きましょう。


12:[回答] 紅葉 [MAIL] [URL] [2002/10/28 16:23 ]

まさに冷や汗三斗たびたびお手を煩わし、申し訳なくまたありがたく感謝いたします。
1 まさにその通りbodyが多すぎました。
2 ということはその部分はずして良い?
3 これはNN6.1でもだめです。余分に取ると問題ありますか?
4 その通りでした。
問題
1)1800年を基準として入れておき、+、ーボタンで年数を変えて”表示”ボタンを押すと、年数が元の1800年に戻ってしまう。指定した年月旬はそのまま表示したいのだが。また画像表示は出来ていません。
2)私のPCにはIE、NNがかって必要があり両方が入れてあります。それが原因と思われる障害(DBをWWWからの検索時に選択できなくなる)がIEのみにおこります。1はこれと同じような
ことでしょうか。


13:[回答] Malic [2002/10/28 16:42 ]

スクリプトのコメント開始 <!-- が全角になってる(汗)

<script language="JavaScript"> が langueges になっている

>2 ということはその部分はずして良い?
  残しても害は無いですが外して良いです。
>3 これはNN6.1でもだめです。余分に取ると問題ありますか?
  特に問題ないと思います(size=4で正常に見えるブラウザで、少し横幅が大きくなるだけです。)


問題点の1 また画像表示は出来ていません。  ・・どこの画像ですか?(親ウインドウの背景、子ウインドウの背景、子ウインドウのメイン画像のどれですか?)



14:[回答] 紅葉 [MAIL] [URL] [2002/10/28 17:23 ]

ありがとうございます。こんな所です
問題点1 親ウインドはスペルミスで現在は出ています。
     子ウインドはバックもメイン画像も両方だめです。


15:[回答] Malic [2002/10/28 17:26 ]

function drweather(formobj,targetframe){

引数の区切りが .(ピリオド)になっているので修正。

ネスケ4.xに対応させるなら
var month=formobj.month[formobj.month.selectedIndex].value;
var period=formobj.period[formobj.period.selectedIndex].value;
// var month=formobj.month.value;
// var period=formobj.period.value;

ネスケ4.xでプルダウンで選択された値を取得するときは、以上にように変更しましょう。

tableを使用していないのに、tdタグがある → とりあえず削除しました。(あとで成形してください)


上記のように変更した後は、 IEとネスケ4.xと7.0ではソース上は正常に動いています・・・(ネスケ6.xは持っていません)、


16:[完了] 紅葉 [MAIL] [URL] [2002/10/28 18:12 ]

Malic様
長い間、浅学なものの戯言に、丁寧にご教示頂ありがとうござい
ました。おかげさまで紅葉が枯れ葉(定年)になる前に20年間
集め、画像化した江戸時代後半の日々の天気地図(等圧線は引けない)を紙芝居のように簡単に表示させるシステムをつくれそうです。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World