人に聞けない痔の悩み、これでスッキリ >>

モーダル内に表示させるセレクトボックスで、毎回モーダル起動時ごとに、
セレクトボックス内の初期選択状態を変えたいと思っています。
1回目のモーダル起動時には本日の日付をSELECTEDにし、2回目以降は
前回のモーダル起動時に選択した値をSELECTEDにしたいと思っております。
いろいろな方法があると思うのですが(てっとりばやく、フラグを持たせる
とか、クッキーを使うとか・・・)、正しく実行されず、困っています。
どなたか、よいアドバイスをください。お願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

 『補足』『お礼』への発言がありませんので、一方通行ですので、大変心配しております。

(^^)

 どうやら、解決したのですね。SELECTEDをクッキーで制御したい点に付いては、回答していませんでしたので、追加しておきます。ここでは例として回答します。(^^);

 SELECTでブラウザーの表示サイズを変更し、変更されたサイズをクッキー登録し、再度表示された場合にクッキー値があれば、SELECTEDを埋め込みます。(クッキー登録が無い場合、つまり最初の訪問とクッキー期限切れの時)は全画面表示します。クッキーの登録と呼び出しのfunctionは以下で答えています。

--------------------
<script language="JavaScript"><!--
function resize_x(that){
size_x = that.options[that.selectedIndex].value;
redisp(size_x);
SaveCookie('wd',size_x);
}
function redisp(size_x){
if( size_x < screen.availWidth && size_x > 0){
position_x = ( screen.availWidth - size_x ) / 2 ;
self.resizeTo( size_x,screen.availHeight);
self.moveTo(position_x,0);
}else{
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
}
}
wd = (LoadCookie('wd')!=null)? LoadCookie('wd'):'0' ;
redisp(wd);
// -->You need Java Script Runtime Processor !
</script>
--------------------

以上をHEAD内にでも登録します。

後はBODY中に
--------------------
<table><form><tr><td>
<select name=fix_size onChange="resize_x(this)">
<script language="JavaScript"><!--
document.write('<option value=640');
if(wd==640) document.write(' selected');
document.write('>640\n');
document.write('<option value=800');
if(wd==800) document.write(' selected');
document.write('>800\n');
document.write('<option value=1024');
if(wd==1024) document.write(' selected');
document.write('>1024\n');
document.write('<option value=0');
if(wd==0) document.write(' selected');
document.write('>full\n');
// -->
</script>
</select>
</td></tr></form></table>
--------------------
でご希望のSELECTEDは自動的に復元されます。ご健闘を祈ります。
    • good
    • 0

 まず、動的に強制的にクッキーへの書き出しを行いましょう。

クッキーへの登録と、読み出し用の JavaScript 関数を以下のようにします。(^^)
 当方で利用中の書式です。(^^)

<script language=javascript>
<!--

function getFront(mainStr,searchStr)
{foundOffset=mainStr.indexOf(searchStr);
if (foundOffset==-1){ return null };
return mainStr.substring(0,foundOffset);
};

function getEnd(mainStr,searchStr)
{foundOffset=mainStr.indexOf(searchStr);
if(foundOffset==-1){ return null };
return mainStr.substring(foundOffset+searchStr.length,mainStr.length);
}

function LoadCookie(name)
{var str=getEnd(document.cookie,name+"=");
if(str!=null){var tmp=getFront(str,";");
if(tmp!=null){ str=unescape(tmp) }
else{ str=unescape(str) };};
return str;
}

function SaveCookie(name,value)
{var expires = new Date();
//このクッキーの賞味期限は1週間です。
expires.setTime(expires.getTime() + (7*24*60*60*1000));
document.cookie=name+"="+escape(value)+"; expires="+expires.toGMTString();};

// --> Error ! (^^);
</script>

以上が汎用のクッキーへの書き出しと、読み込みの関数です。ASCIIデーターであればエスケープ文字列へのエンコード・デコード処理は無用ですね。日本語を扱いたい場合は必要ですね。

SaveCookie(name,value)
を任意に実行すればリアルタイムにクッキーへの書き込みを行います。この例では1週間保持されます。適当に有効時間を調整しましょう。

LoadCookie(name)
で、text name に登録されたクッキーを受け取ります。

abc = (LoadCookie('Count')!=null)? LoadCookie('Count'):'1' ;
などで呼び出します。クッキー名「 Count 」が登録されていなければ、文字データー「 1 」を変数「 abc 」に返します。

 クッキー登録が理解できたら、SELECT 廻りをJavaScriptで飾り立てます。自力で出来ますか? (^^);
    • good
    • 0

ようするに、モーダルウィンドウの初期起動状態の保持方法ですか?



簡単に作ってみたのですが、参考になるかどうかわかりませんが試してみてください。
以下のソースをファイルに貼り付けて実行してください。

注意:このサンプルは、モーダルを起動する画面が閉じられると、状態は初期の状態に戻ります。状態をずっと保持しておきたいなら、クッキーを使ったほうがいいと思います。

☆サンプル
file:a.htm
******************************************************************
<form name="test">
<input type="hidden" name="idx" value="1">
<input type="button" name="open" value="開く" onclick="window.open('b.htm', 'modal')">
</form>
******************************************************************

file:b.htm
******************************************************************
<script language="javascript">
<!--
function openInfo()
{
var no;
no = opener.document.test.idx.value;
document.test2.hiduke[no].checked = true;
}

function setInfo(iIdx)
{
opener.document.test.idx.value = iIdx;
}
//-->
</script>

<form name="test2">
<input type="radio" name="hiduke" onclick="setInfo('0')">前日<br>
<input type="radio" name="hiduke" onclick="setInfo('1')">当日<br>
<input type="radio" name="hiduke" onclick="setInfo('2')">明日<br>
</form>

<script language="javascript">
<!--
openInfo();
//-->
</script>
******************************************************************
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qの中にDBから持ってきたデータを反映させたい

urizakaです。
現在、Jbuilder+SQL-Serverでプログラムを作っているのですが、そのなかで
SELECTタグで選択できるデータはDBから持ってきたものとし、尚且つそのタグ
部分に表示される初期値がDBから持ってきたものとしたいのですが、これは
どのようにすればよいのでしょうか?
(DBデータ)
 データベーステーブル名:m_Auth
 フィールド名  code_auth name_auth
1 責任者
          2 リーダー
         3 一般メンバー

 データベーステーブル名:m_staff
 フィールド名  code_staff name code_auth
1 urizaka 1
2 fukutome 2
3 fujiwara 3
4 isezaki 3

(JSPソースコードよりSELECT部分のみ抜粋)
  <SELECT name = "s_code_auth">
<%
int i;
 /** tantoushaallbeanはこのJSPで使うメソッドが入ったBeanファイルです**/
for( i = 0; i < tantoushaallbean.getcode_auth().size(); i++ ){
out.println("<option value=\"" +
/** 下記はcode_authを全て持ってくるメソッドです**/
tantoushaallbean.getcode_auth().elementAt(i) + "\">" +
/** 下記はname_authを全て持ってくるメソッドです**/
tantoushaallbean.getnameauth().elementAt(i) + "</option>" );
}
%>
</SELECT>

現在では、SELECTタグで選択できるデータはDBから持ってきたものが表示
されますが、初期状態はDB「m_staff」のcode_authがどの値であろうと、
code_authが1の責任者になっている状態です。
 すみませんが、上記の件について方法をご存知の方がいらっしゃったら
ぜひ宜しくお願いします。

urizakaです。
現在、Jbuilder+SQL-Serverでプログラムを作っているのですが、そのなかで
SELECTタグで選択できるデータはDBから持ってきたものとし、尚且つそのタグ
部分に表示される初期値がDBから持ってきたものとしたいのですが、これは
どのようにすればよいのでしょうか?
(DBデータ)
 データベーステーブル名:m_Auth
 フィールド名  code_auth name_auth
1 責任者
          2 リーダー
         3 一般メンバー

...続きを読む

Aベストアンサー

こんにちは。
intをStringに変換。お好きな方法でどうぞ。
・String s = "" + int;
・String s = Integer.toString(int);
・String s = String.valueOf(int);

Stringをintに変換。
・int i = Integer.parseInt(String);

ちなみにintとIntegerは異なるものですのでご注意下さい。

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。

Qtableタグとformタグの組み合わせ

tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか?
私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので
お聞きしました。

<table>
<form>
<input type="hidden" name="a" value="1">
<tr>
<td>
<input type="text" name="b" value="">
</td>
</tr>
<tr>
<td>
<input type="submit" value="OK" value="">
</td>
</tr>
</fomr>
</table>

Aベストアンサー

恐らく、<form>タグを入れると1行分の隙間ができるのでそのように記述しているのでしょう。私も4年ほど前に何かの雑誌でそのように記述しましょう、を確かに見ました。W3Cの理論を無視すれば別に表示するのだから構わないとも思います。
しかし、私の場合、今は、前者様の回答のように<table>の外に記述します。そして、スタイルシートで
<form style="margin:0px;">
とすれば、隙間が無くなります。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Qテキストボックスの入力をリセット

ボタンが押されたら、テキストボックスの入力内容を削除するにはどうしたらいいでしょうか?

Aベストアンサー

こんな感じ。

<form>
<input type=button value="clear" onClick="this.form.t.value = ''">
<input type=text size=50 name=t>
</form>

ボタンの this.form.t の t が、テキストの名前になっていて、押されると
空の文字列を入れる、だけです。

もし、フォーム全体のテキストをクリアするならば、こんな方法もあります。

<form>
<input type=button value="clear" onClick="this.form.reset()">
<input type=text size=50 name=t1>
<input type=text size=50 name=t2>
<input type=text size=50 name=t3>
</form>


人気Q&Aランキング