痔になりやすい生活習慣とは?

http://d.hatena.ne.jp/Mars/20071109

こちらのページを参考にしてフォームの中身を以下ようにしたいのです。

このような感じです
<select id=”SEL1”>
<optgroup label=”choise”>
<option value=”fruit”>フルーツ</option>
<option value=”vegetable”>野菜</option>
</select>
<select id=”SEL2”>
<optgroup label=”fruits”>
<option value=”x1”>みかん</option>
<option value=”x1”>りんご</option>
<option value=”x1”>メロン</option>
</optgroup>
<optgroup label=”vegetable”>
<option value=”x1”>キャベツ</option>
<option value=”x1”>きゅうり</option>
<option value=”x1”>トマト</option>
</optgroup>
</select>
<select id=”SEL3”>
<optgroup label=”x1”>
<option>1個</option>
<option>2個</option>
<option>3個</option>
<option>4個</option>
<option>5個</option>
<option>6個</option>
</optgroup>
</select>

このようにプルダウンメニューを3階層にして、3段階目に繋げる2段階目のoption valueは全て同じにしたいのですが、
そうすると、フォームで送信した結果が select id=SEL2 のところで全てが ”x1”になってしまい各商品の名前を出すことができません。

何か方法があれば教えてください。

使っているジャバスクリプトは以下です
function ConnectedSelect(selIdList){
for(var i=0;selIdList[i];i++) {
var CS = new Object();
var obj = document.getElementById(selIdList[i]);
if(i){
CS.node=document.createElement('select');
var GR = obj.getElementsByTagName('optgroup');
while(GR[0]) {
CS.node.appendChild(GR[0].cloneNode(true));
obj.removeChild(GR[0]);
}
obj.disabled = true;
}
if(selIdList[i+1]) {
CS.nextSelect = document.getElementById(selIdList[i+1]);
obj.onchange = function(){ConnectedSelectEnabledSelect(this)};
} else {
CS.nextSelect = false;
}
obj.ConnectedSelect = CS;
}
}

function ConnectedSelectEnabledSelect(oSel){
var oVal = oSel.options[oSel.selectedIndex].value;
if(oVal) {
while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1);
var eF = false;
for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) {
if(OG.label == oVal) {
eF = true;
for(var OP=OG.firstChild;OP;OP=OP.nextSibling)
oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true));
break;
}
}
oSel.ConnectedSelect.nextSelect.disabled = !eF;
} else {
oSel.ConnectedSelect.nextSelect.selectedIndex = 0;
oSel.ConnectedSelect.nextSelect.disabled = true;
}
if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange();
}

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

A 回答 (3件)

いまいちやりたいことがわからないのですが、


optgroupは単なるグルーピングなので、それと何かをあわせる必要は
ありません。
ただ以下のようにすると、フルーツを選ぶとフルーツの先頭、野菜を
選ぶと野菜の先頭に選択を移動することは可能です。

<script>
window.onload=setSelect;

function setSelect(){
var s1=document.getElementById("SEL1");
s1.onchange=function(){
var s2=document.getElementById("SEL2");
var og=s2.firstChild;
while(og){
if(og.label==this.value){
var op=og.firstChild;
while(op){
if(op.tagName=="OPTION"){
op.selected=true;
op=og.lastChild;
}
op=op.nextSibling;
}
}
og=og.nextSibling;
}
}
}
</script>

<select id="SEL1" name="SEL1">
<optgroup label="choise">
<option value="fruit">フルーツ</option>
<option value="vegetable">野菜</option>
</select>
<select id="SEL2" name="SEL2">
<optgroup label="fruit" >
<option value="orange">みかん</option>
<option value="apple">りんご</option>
<option value="meron">メロン</option>
</optgroup>
<optgroup label="vegetable">
<option value="cabbage">キャベツ</option>
<option value="cucumber">きゅうり</option>
<option value="tomato">トマト</option>
</optgroup>
</select>
<select id="SEL3" name="SEL3">
<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>
</select>
    • good
    • 0

良いも悪いもvalueが送られるんだから" x1"になるのは当然なんじゃないのかな・・・


javascriptも使ってるっていうなら何番目の項目が選択されているのかを調べる事はできるよ

http://www.tohoho-web.com/js/form.htm#selectedIn …

この回答への補足

ご回答ありがとうございます。
javascriptの知識は全くなく、参考にしたHPからコピペしたんです。
SEL2で選択したデータを送信したいですがこのサンプルでは無理ですかね。。

補足日時:2008/05/20 16:07
    • good
    • 0

idだけでnameがなければサーバーにデータはおくられないと思いますが・・・



で、nameをつけたとしてvalueをx1にしているのですから送られるデータは
x1で何の問題もないと思いますが、いったいなんのためにx1にしてあって、
送りたいデータはどのデータなのでしょうか?
3つのセレクトの関連性も含めて提示したほうがよいでしょう

この回答への補足

ご回答ありがとうございます。
はい、nameを付け加えるのを忘れていましたすみません。

送りたいデータの内容は、もしフルーツを選んだ場合fruitが送られますよね、
そして連動したプルダウンからりんごを選びたい場合、続けてSEL3の個数も選べるようにしたいのですが、そうするとSEL2でvalueをx1にしたため、りんごのデータが送信されずvalueのx1が送信されてしまいます。
(SEL2のvalue名は連動するためにはSEL3のoptgroup label名と同じにしないといけないんですよね?)
説明が下手で申し訳ございません。
java scriptの知識が全くなく、参考にしたHPを修正して作ったので、javascriptの知識がなくては無理でしたらあきらめます。

補足日時:2008/05/20 15:59
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qプルダウンとテキストの連動

お世話になります。プルダウン1を選択すると、プルダウン2の内容が切り替わり、さらにプルダウン2を選択すると、横のテキストフィールド内にテキストが入る(プルダウン2で選択した項目の説明)というようにしたいのです。プルダウン1をえらぶと2の項目がかわる、まではできたのですが、次のテキスト変更がわかりません。プルダウン3として、そこにテキストを表示させようかと思ったのですが、やはりテキストフィールドにしてほしいといわれてしまいました。。。わかりにくい説明ですみませんが、参考になるサイトなどご存じでしたら教えてください。どうかよろしくお願い致します。

Aベストアンサー

とりあえず、簡単にソースを書いてみました。

<html>
<head>
<script type="text/javascript"><!--
msgtxt = new Array();
for (i=0; i<3; i++){
msgtxt[i] = new Array();
}

msgtxt[0][0]="a-1が選択されているときのメッセージ";
msgtxt[0][1]="a-2が選択されているときのメッセージ";
msgtxt[0][2]="a-3が選択されているときのメッセージ";
msgtxt[1][0]="b-1が選択されているときのメッセージ";
msgtxt[1][1]="b-2が選択されているときのメッセージ";
msgtxt[1][2]="b-3が選択されているときのメッセージ";
msgtxt[2][0]="c-1が選択されているときのメッセージ";
msgtxt[2][1]="c-2が選択されているときのメッセージ";
msgtxt[2][2]="c-3が選択されているときのメッセージ";


function selchg(){
sltd=document.f1.s1.selectedIndex;
if (sltd=="0"){
document.f1.s2.options[0].text="a-1";
document.f1.s2.options[1].text="a-2";
document.f1.s2.options[2].text="a-3";
}
else if (sltd=="1"){
document.f1.s2.options[0].text="b-1";
document.f1.s2.options[1].text="b-2";
document.f1.s2.options[2].text="b-3";
}
else if (sltd=="2"){
document.f1.s2.options[0].text="c-1";
document.f1.s2.options[1].text="c-2";
document.f1.s2.options[2].text="c-3";
}
}

function txtchg(){
x=document.f1.s1.selectedIndex;
y=document.f1.s2.selectedIndex;
document.f1.t1.value=msgtxt[x][y];
}
//--></script>
</head>
<body>

<form name="f1">
<select name="s1" onChange="selchg()">
<option>a
<option>b
<option>c
</select>

<select name="s2" onChange="txtchg()">
<option>a-1
<option>a-2
<option>a-3
</select>

<textarea name="t1"></textarea>
</form>

</body>
</html>

こんな感じでしょうか。

参考になれば幸いです。

とりあえず、簡単にソースを書いてみました。

<html>
<head>
<script type="text/javascript"><!--
msgtxt = new Array();
for (i=0; i<3; i++){
msgtxt[i] = new Array();
}

msgtxt[0][0]="a-1が選択されているときのメッセージ";
msgtxt[0][1]="a-2が選択されているときのメッセージ";
msgtxt[0][2]="a-3が選択されているときのメッセージ";
msgtxt[1][0]="b-1が選択されているときのメッセージ";
msgtxt[1][1]="b-2が選択されているときのメッセージ";
msgtxt[1][2]="b-3が選択されていると...続きを読む

Q複数連動型のプルダウンフォームについて

http://d.hatena.ne.jp/Mars/20071109
http://blog.sugulab.com/?p=454
上記のページを参考にして5断層のプルダウンを作成したいのですが、
どうしても4断層目と5断層目がうまく作動しません。
どなたかご教授願います。。。

Aベストアンサー

なんかあれね。
ポイントは2つ。
・value
・ダブルクォーテーション
これで直るわ。

Q複数のプルダウンからリンクする方法

こんにちは、いつもお世話になっています、英行と申します。

今回ご質問させて頂く内容なのですが、複数のプルダウンから指定した場所へのリンク方法?です。

例えば自分のサイト内に3年分の日記があったとします。
その中には12か月分の項目があり、さらに28~31の項目が有ります。
3つのプルダウンを並べ、指定したページへリンクしたいと考えています。

例)
年 月 日 Go

といった感じで、2000年の09月の15日というようにプルダウンで選択して
Goを押すことによって指定した場所へリンクさせる方法はあるでしょうか?

お分かりになる方、教えていただけませんでしょうか?
よろしくお願いします。

Aベストアンサー

こんな感じでどうでしょうか?

<html>
<script>
<!--
function jump(){
location.href = 'http://test/' + form.year.value + form.month.value + form.day.value + '.html';
}
-->
</script>
<body>
<form name="form">
<select name="year">
<option value="2005">2005</option>
<option value="2007">2007</option>
</select>
<select name="month">
<option value="12">12</option>
<option value="06">06</option>
</select>
<select name="day">
<option value="31">31</option>
<option value="01">01</option>
</select>
<input type="button" value="GO" onclick="jump();" />
</form>
</body>
</html>

こんな感じでどうでしょうか?

<html>
<script>
<!--
function jump(){
location.href = 'http://test/' + form.year.value + form.month.value + form.day.value + '.html';
}
-->
</script>
<body>
<form name="form">
<select name="year">
<option value="2005">2005</option>
<option value="2007">2007</option>
</select>
<select name="month">
<option value="12">12</option>
<option value="06">06</option>
</select>
<select name="day">
<option value="31">31</option>
<op...続きを読む

QPHP ボタンが押されたら処理を実行する

PHPプログラミングをしています。
「はい」というボタンが押されたらこの処理を行い、
「いいえ」というボタンが押されたらこの処理を行う
ということはどうすれば実装できるのでしょうか?

Aベストアンサー

どういう環境下で作っておられるのかが全然わかりませんが、
PHPというこですので、Webベースのフォームですよね。

たとえば、「はい」ボタンと「いいえ」ボタンをそれぞれフォームのSubmitにしておいて、
POST先のフォームで処理を分ければどうでしょうか。

送信元
<form name="Hai" method="POST" action="hoge.php">
<input type="hidden" name="answer" value="1">
<input type="submit" value="はい">
</form>

<form name="Hai" method="POST" action="hoge.php">
<input type="hidden" name="answer" value="0">
<input type="submit" value="いいえ">
</form>


送信先
$answer = $_POST["answer"];

if($answer == 1){
// 「はい」の時の処理
}else{
// 「いいえ」の時の処理
}


ちなみに、自分から自分へPOSTすればPHPスクリプトも2つに分けずにできると思います。
また、POSTじゃなくGETでも同様のことはできると思います。

どういう環境下で作っておられるのかが全然わかりませんが、
PHPというこですので、Webベースのフォームですよね。

たとえば、「はい」ボタンと「いいえ」ボタンをそれぞれフォームのSubmitにしておいて、
POST先のフォームで処理を分ければどうでしょうか。

送信元
<form name="Hai" method="POST" action="hoge.php">
<input type="hidden" name="answer" value="1">
<input type="submit" value="はい">
</form>

<form name="Hai" method="POST" action="hoge.php">
<input type="hidden" name="answer" ...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q