「平成」を感じるもの

セレクトボックスの操作について

解決済

  • 質問者：hunter_999
  • 質問日時：
  • 回答数：5件

セレクトボックスの操作について
３つのセレクトボックスのうち、どれかを変更すると同じテキストのものに
残りの２つのセレクトボックスを変更したいと思っております。
同じテキストが無ければ<option value="">----------</option>をcheckedにしたいと
考えているのですが、どなたかご教授いただければと思います。

[変更したいhtml]

<select name="house_kouzou_a" id="house_kouzou_a" class="a">
<option value="">----------</option>
<option value="1">木造</option>
<option value="2">鉄筋</option>
</select>
<select name="house_kouzou_b" id="house_kouzou_b" class="b">
<option value="">----------</option>
<option value="1">木造</option>
<option value="2">鉄筋</option>
</select>
<select name="house_kouzou_c" id="house_kouzou_c" class="c">
<option value="">----------</option>
<option value="1">木造</option>
<option value="3">鉄筋</option>
<option value="4">その他</option>
</select>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

ヘッダーバージョン。


<script type="text/javascript">
var sellist = new Array();

function selctrl0(ids){
for(var i=0;ids[i];i++) {
sellist.push(document.getElementById(ids[i]));
sellist[i].onchange=new Function("selctrl1(this)");
}
}

function selctrl1(O){
var seltext = O.options[O.selectedIndex].text;
for(var i=0;sellist[i];i++){
if(sellist[i] == O) continue;
var flag = false;
for(var j=0;sellist[i].options[j];j++) {
flag |= sellist[i].options[j].selected = (seltext == sellist[i].options[j].text);
}
if(! flag) sellist[i].options[0].selected = true;
}
}
</script>
</head>
<body onload="selctrl0(['house_kouzou_a','house_kouzou_b','house_kouzou_c'])">
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
まさにやりたいことが実現できました。

通報する
お礼日時：2010/05/12 09:27

No.4

  • 回答者： steel_gray
  • 回答日時：

サンプル



<select name="house_kouzou_a" id="house_kouzou_a" class="a">
<option value="">----------</option>
<option value="1">木造</option>
<option value="2">鉄筋</option>
</select>
<select name="house_kouzou_b" id="house_kouzou_b" class="b">
<option value="">----------</option>
<option value="1">木造</option>
<option value="2">鉄筋</option>
</select>
<select name="house_kouzou_c" id="house_kouzou_c" class="c">
<option value="">----------</option>
<option value="1">木造</option>
<option value="3">鉄筋</option>
<option value="4">その他</option>
</select>
<!-- このscriptはヘッダ部じゃなくてselectの後ろ、</body>より前に置く -->
<script type="text/javascript">
var sellist = new Array(document.getElementById('house_kouzou_a'),
document.getElementById('house_kouzou_b'),
document.getElementById('house_kouzou_c'));

for(var i=0;sellist[i];i++) sellist[i].onchange=new Function("selctrl(this)");

function selctrl(O){
var seltext = O.options[O.selectedIndex].text;
for(var i=0;sellist[i];i++){
if(sellist[i] == O) continue;
var flag = false;
for(var j=0;sellist[i].options[j];j++) {
flag |= (sellist[i].options[j].selected = (seltext == sellist[i].options[j].text));
}
if(! flag) sellist[i].options[0].selected = true;
}
}
</script>

この回答への補足

ご回答ありがとうございます。
思い通りの動作なのですが、javascriptをhead部分に入れる事は
可能でしょうか？
わがままを言って申し訳ございません。

補足日時：2010/05/11 17:25
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

そもそも３つのselectが・・・こうぞうをかえるべき。


じょういに、しもじもが、したがっていくせってい。いやなら pFlag=true; に
ぜんかくくうはくは、すべてはんかくに。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<body>
<form action="#">
　<p>
　　<select name="house_kouzou_a" id="house_kouzou_a" class="a" onchange="hoge( this )">
　　　<option value="" selected>-</option>
　　　<option value="1">木造</option>
　　　<option value="2">鉄筋</option>
　　</select>

　　<select name="house_kouzou_b" id="house_kouzou_b" class="b" onchange="hoge( this )">
　　　<option value="" selected>-</option>
　　　<option value="1">木造</option>
　　　<option value="2">鉄筋</option>
　　</select>

　　<select name="house_kouzou_c" id="house_kouzou_c" class="c" onchange="hoge( this )">
　　　<option value="" selected>-</option>
　　　<option value="1">木造</option>
　　　<option value="3">鉄筋</option>
　　　<option value="4">その他</option>
　　</select>
　</p>
</form>
<script type="text/javascript">

var getSelectText = function ( select ) {
　var options = select.options;
　var text = options[ select.selectedIndex ].text;
　return text;
};

var setSelectByText = function ( select, text ) {
　var options = select.options;
　var option;
　var count = 0;
　
　while( option = options[ count++ ] ) {
　 option.selected = option.text == text;
　}
};


var setSomeText = function (　) {
　if( !arguments.length ) return null;
　var count = 0;
　var selects = [ ];
　var name, select;
　
　while( name = arguments[ count++ ] ) {
　　select = document.forms[0].elements[ name ];
　　if( 'SELECT' === select.nodeName )
　　　selects.push( select );
　}
　
　return function ( select ) {
　　var count = 0;
　　var target;
　　var text = getSelectText( select );
　　var pFlag = false;

　　while( target = selects[ count++ ] ) {
　　　if( select == target ) {
　　　　pFlag = true;
　　　} else {
　　　　pFlag && setSelectByText( target, text );
　　　}
　　}
　};
};

var hoge = setSomeText( 'house_kouzou_a', 'house_kouzou_b', 'house_kouzou_c' );
</script>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： zeff#1
  • 回答日時：

質問文に忠実に作ってみました。


「一致しない」は一致しないパターンの確認用です。

<script type="text/javascript">
<!--
var o,str,bn,cn,i;
function selectOperate(){
o = document.form1;
str = o.house_kouzou_a.options[o.house_kouzou_a.selectedIndex].innerHTML;

//2番目:一致するものを探す
bn = 0;
for(i in o.house_kouzou_b.options ){
if(o.house_kouzou_b.options[i].innerHTML == str){
bn = i;
break;
}
}
//一致したものがあればその番号。しなければ0番目。
o.house_kouzou_b.options[bn].selected = true;

//3番目:一致するものを探す
cn = 0;
for( i in o.house_kouzou_c.options ){
if(o.house_kouzou_c.options[i].innerHTML == str){
cn = i;
break;
}
}
//一致したものがあればその番号。しなければ0番目。
o.house_kouzou_c.options[cn].selected = true;

}
//-->
</script>
</head>
<body>

<form action="#" name="form1" id="form1">
<select name="house_kouzou_a" id="house_kouzou_a" class="a" onchange="selectOperate()">
<option value="">----------</option>
<option value="1">木造</option>
<option value="2">鉄筋</option>
<option value="3">一致しない</option>
</select>

<select name="house_kouzou_b" id="house_kouzou_b" class="b">
<option value="">----------</option>
<option value="1">木造</option>
<option value="2">鉄筋</option>
</select>

<select name="house_kouzou_c" id="house_kouzou_c" class="c">
<option value="">----------</option>
<option value="1">木造</option>
<option value="3">鉄筋</option>
<option value="4">その他</option>
</select>
</form>

</body>
</html>

この回答への補足

ご回答ありがとうございます。
上記のスクリプトだとhouse_kouzou_aしか操作できないと思うのですが・・
house_kouzou_b,house_kouzou_cどれからも操作できるようにしたいと思っております。

補足日時：2010/05/11 17:18
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： nine999
  • 回答日時：

同じ名前なら、valueで示す番号を揃えた方が良いと思います。

3つめの鉄筋が3になっていますが2にして統一します。
その他は、後で項目を追加したときのことを考えて9にして、何もない場合も明示的に判りやすく0にすると良いでしょう。

とりあえず、インデックス番号を使った単純な方法を書いておきます。

house_kouzou_aの制御（フォームの名前は不明なのでform1とする）
<select name="house_kouzou_a" id="house_kouzou_a" class="a" onChange="changeSelect()">

<script>
function changeSelect()
{
//aのインデックス番号を取得（何番目のメニューか）
get = document.form1.house_kouzou_a.selectedIndex;
//bとcを同じインデックス番号に設定
document.form1.house_kouzou_b[get].selected = true;
document.form1.house_kouzou_c[get].selected = true;
}
</script>

cにはその他があるので、その場合は処理をしないようにif文で制御します。

参考URL：http://www.shurey.com/Soft/JS/form/index.html
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報