おしえて

javascriptについて

締切済

質問者：matukou500
質問日時：2017/01/23 22:55
回答数：4件

<!DOCTYPE html>
<html lang='ja'>
<head>
<title>JavaScript テスト</title>
</head>
<body>

<form name="selbox">
<p>好きなリーグは？</p>
<select name="league" onchange="teamSet()">
<option value="">リーグ選択</option>
<option value="">プレミアリーグ</option>
<option value="">リーガエスパニョーラ</option>
<option value="">ブンデスリーガー</option>
<option value="">セリエＡ</option>
<option value="">リーグ１</option>

</select>
<p>好きなチームは？</p>
<select name="team">
<option value="">チーム選択</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>

<script>
var ＵＫ_league=new Array("","アーセナル","チェルシー","マンチェスターＵ","マンチェスターＣ","リバプール","トッテナム");
var ＳＰ_league=new Array("","バルセロナ","レアルマドリー","アトレティコマドリー","セビージャ","ビジャレアル","バレンシア");
var ＧＥ_league=new Array("","Ｂミュンヘン","ドルトムント","シャルケ04","フランクフルト","ヘルタベルリン","")
var ＩＴ_league=new Array("","ユベントス","インテル","ＡＣミラン","ローマ","フィレオンティーナ","ラツィオ")
var ＦＲ_league=new Array("","ＰＳＧ","","","","","")
function teamSet(){
for(i=1;i<7;i++){
switch(document.selbox.league.selectedIndex){
case 0: document.selbox.team.options [i].text="";break;
case 1: document.selbox.team.options [i].text=ＵＫ_league[i];break;
case 2: document.selbox.team.options [i].text=ＳＰ_league[i];break;
case 3: document.selbox.team.options [i].text=ＧＥ_league[i];break;
case 4: document.selbox.team.options [i].text=ＩＴ_league[i];break;
case 5: document.selbox.team.options [i].text=ＦＲ_league[i];break;
}
}
document.selbox.team.selectedIndex=0;
}
</script>
</form>
</body>
</html>

リーグを選ぶ⇒そのリーグのチームを選ぶ⇒そのチームの選手を選ぶ
を作成しています。チームを選ぶところまではできたのですが、そこから選手を選ぶプログラムを打ちたいのですが、できません。
1つのチームでいいのでどなたか教えてください

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： babu_babu_baboo
回答日時：2017/01/28 00:37

こそっと、書いてみた。

連動させたいselect要素には同じclassを指定。
selectedさせたいoption要素にはclass="selected"をつける
初代の親には普通にselected

各select要素のクローンを作り、子孫関係を紐付ける
親のselect要素の値から、子クローンのoptgroupを子にコピーする
みたいな・・・。

<!DOCTYPE html>
<meta charset="utf-8">
<title>SELECT要素の連動</title>
<style>
body {
　color: white;
　background: black;
}
</style>

<body>
<form id="SELECT_TEST">
<p>
　<label>Group:</label>
　<select name="group" class="selectA">
　　<option value="GroupA">GROUP A</option>
　　<option value="GroupB">GROUP B</option>
　</select>

　<label>Team:</label>
　<select name="team" class="selectA">
　　<optgroup label="GroupA">
　　　<option value="TeamA">TEAM A</option>
　　　<option value="TeamB">TEAM B</option>
　　</optgroup>
　　<optgroup label="GroupB">
　　　<option value="TeamC">TEAM C</option>
　　　<option value="TeamD">TEAM D</option>
　　</optgroup>
　</select>

　<label>Player:</label>
　<select name="player" class="selectA">
　　<optgroup label="TeamA">
　　　<option value="PlayerA">PLAYER A</option>
　　　<option value="PlayerB">PLAYER B</option>
　　</optgroup>
　　<optgroup label="TeamB">
　　　<option value="PlayerC">PLAYER C</option>
　　　<option value="PlayerD">PLAYER D</option>
　　</optgroup>
　　<optgroup label="TeamC">
　　　<option value="PlayerE">PLAYER E</option>
　　　<option value="PlayerF">PLAYER F</option>
　　</optgroup>
　　<optgroup label="TeamD">
　　　<option value="PlayerG">PLAYER G</option>
　　　<option value="PlayerH">PLAYER H</option>
　　</optgroup>
　</select>
</p>

<script>

(function (D) {

　function toAry (nodeList) {
　　return Array.prototype.slice.call (nodeList);
　}

　function append (e) {
　　this.insertBefore (e, this.firstChild);
　}

　function remove (e) {
　　this.removeChild (e);
　}

　function replace (e, n) {
　　toAry (e.querySelectorAll ('optgroup')).forEach (remove, e);
　　e.appendChild (n);
　}

　//______

　function ESelect (select) {
　　this.eSelect = select;
　　this.cSelect = select.cloneNode (true);
　}

　function getVal (select) {
　　return select.options[select.selectedIndex].value;
　}

　function replaceGroup (label) {
　　var s, e;
　　var g = this.cSelect.querySelector (label
　　　　　　? 'optgroup[label="' + label + '"]'
　　　　　　: 'optgroup:first-of-type');

　　if (g) {
　　　replace (e = this.eSelect, g.cloneNode (true));
　　　s = e.querySelector ('option[class^="selected"]') ||
　　　　　e.querySelector ('option:first-of-type');
　　　if (s)
　　　　s.selected = true;
　　}
　　else
　　　toAry (this.cSelect.querySelectorAll ('optgroup'))
　　　　.reverse ()
　　　　.forEach (append, e);
　}

　//______
　
　ESelect.prototype.replaceGroup = replaceGroup;
　ESelect.prototype.getVal　　　 = getVal;

　//______
　
　function selectChangeHandle (event) {
　　var e = event.target;
　　var n, t;
　　
　　while (-1 < (n = this.selectBuffer.indexOf (e))) {
　　　t = this.cloneBuffer[n];
　　　t.replaceGroup (getVal (e));
　　　e = t.eSelect;
　　}
　}

　function init (select) {
　　var buf = { }, begin = [ ];
　　var i, s, e, n;

　　for (i = 0; s = select[i]; i += 1) {
　　　if ((n = s.className)) {
　　　　if (e = buf[n]) {
　　　　　e.addEventListener ('change', this, false);
　　　　　this.selectBuffer.push (e);
　　　　　this.cloneBuffer.push (new ESelect (s));
　　　　　buf[n] = s;
　　　　}
　　　　else
　　　　　begin.push (buf[n] = s);
　　　}
　　}

　　begin.forEach (function (select) {
　　　selectChangeHandle.call (this, { target: select });
　　}, this);
　}

　//______

　var Interlock = new Object;

　Interlock.handleEvent = selectChangeHandle;
　Interlock.selectBuffer = [ ];
　Interlock.cloneBuffer = [ ];
　
　init.call (Interlock, D.querySelectorAll ('select'));
}) (document);
</script>

- 0
- 件

通報する

No.3

回答者： Ogre7077
回答日時：2017/01/25 12:07

リーグとチームと選手と、ついでに選手詳細が連動するサンプル

<!DOCTYPE html><meta charset=utf-8>
<form name=alpha>
<p> <select name=league></select>
<p> <select name=team></select>
<p> <select name=member></select>
<p> <output name=detail></output>
</form>
<script>(function(W,D,_){
var leagues = [
{ value:'A', name:'江戸', teams:[
{ value:'A1', name:'宗家', members:[ 'A1a:徳川秀忠', 'A1b:徳川家光', 'A1c:徳川綱吉' ] },
{ value:'A2', name:'紀伊', members:[ 'A2a:徳川吉宗', 'A2b:徳川家治', 'A2c:徳川家慶' ] },
{ value:'A3', name:'水戸', members:[ 'A3a:徳川光圀', 'A3b:一橋慶喜' ] },
]},
{ value:'B', name:'三国', teams:[
{ value:'B0', name:'後漢', members:[ 'B0a:劉宏', 'B0b:劉協' ] },
{ value:'B1', name:'曹魏', members:[ 'B1a:曹操', 'B1b:曹丕', 'B1c:曹植' ] },
{ value:'B2', name:'孫呉', members:[ 'B2a:孫堅', 'B2b:孫策', 'B2c:孫権' ] },
{ value:'B3', name:'蜀漢', members:[ 'B3a:劉備', 'B3b:劉禅' ] },
]},
{ value:'C', name:'ローマ', teams:[
{ value:'C1', name:'Julio', members:[ 'C1a:Caesar', 'C1b:Augustus', 'C1c:Tiberius' ] },
{ value:'C2', name:'Flavian', members:[ 'C2a:Vespasianus', 'C2b:Domitianus' ] },
]},
];
function R(d,s){ if (s) for (var i in s) d[i] = s[i]; return d; }
function E(p,n,o){ return p.appendChild(R(D.createElement(n),o)); }
function F(a,v){ for (var i = 0; i < a.length; i++) if (typeof a[i] == 'string' && a[i].startsWith(v) || a[i].value == v) return a[i]; }
D.addEventListener('DOMContentLoaded', function(){
_ ; var setOptions = function(sel, a, m) {
_ ; _ ; while (sel.lastChild) sel.removeChild(sel.lastChild);
_ ; _ ; if (!a) return;
_ ; _ ; E(sel,'option', {textContent:m? m: '[please choice]'});
_ ; _ ; a.forEach(function(d){
_ ; _ ; _ ; var v = (typeof d == 'string')? v = d.split(':'): [ d.value, d.name ];
_ ; _ ; _ ; E(sel,'option', {value:v[0], textContent:v[1]});
_ ; _ ; });
_ ; };
_ ; var form = D.forms['alpha'];
_ ; var sl = form.elements['league'];
_ ; var st = form.elements['team'];
_ ; var sm = form.elements['member'];
_ ; var od = form.elements['detail'];
_ ; setOptions(sl, leagues);
_ ; setOptions(st, null);
_ ; setOptions(sm, null);
_ ; sl.addEventListener('change', function(ev){
_ ; _ ; var lv = ev.target.value;
_ ; _ ; var league = F(leagues, lv);
_ ; _ ; setOptions(st, league? league.teams: null);
_ ; _ ; setOptions(sm, null);
_ ; _ ; od.value = '';
_ ; }, false);
_ ; st.addEventListener('change', function(ev){
_ ; _ ; var lv = sl.value, tv = ev.target.value;
_ ; _ ; var team = F(F(leagues, lv).teams, tv);
_ ; _ ; setOptions(sm, team? team.members: null, '[詳細を表示する選手]');
_ ; _ ; od.value = '';
_ ; }, false);
_ ; sm.addEventListener('change', function(ev){
_ ; _ ; var lv = sl.value, tv = st.value, mv = ev.target.value;
_ ; _ ; var member = F(F(F(leagues, lv).teams, tv).members, mv);
_ ; _ ; od.value = member? member + 'についての詳細': '';
_ ; }, false);
}, false);
})(window, document)</script>

- 0
- 件

通報する

No.2

回答者： yambejp
回答日時：2017/01/24 11:52

この手の処理はデータはサーバー側でデータベースで管理し

条件に応じてajaxでデータを取りに行くというのが賢明です。
もしDBの導入が難しいようであれば、チームごとかリーグごとに
ファイルをつくり選手名をリストにして取り出せるようにするとよいでしょう

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2017/01/24 11:20

こんにちは

想像するところ、データ数がネズミ算式に増えていくので、それをどうするかのほうが問題のような気がします。

セレクトボックスで選択内容に応じて選択肢を連動なさりたいのだと思いますが、データ量の問題を置いておけば、セレクトボックスを制御する例は検索すればたくさん見つかることと思います。
例えば、
http://d.hatena.ne.jp/Mars/20071109
http://www.skuare.net/test/jdependent.html

一方で、データ数がかなり多く、選択しながら範囲を狭めていくようなもので、例えば、駅名検索や住所検索などで選択肢を表示してくれるタイプのものの場合、事前に全てのデータをページ上に用意するのは合理的ではないので（無駄になるデータがほとんど）、別の方法がとられていることが多いと思います。
（全データを保持しているサーバと送受信しながら、必要な内容を表示してゆく方法）