html selectで選択する中身が同じ物の場合

お世話になります
htmlとjavascriptで最初に選んだselectタグの内容により次のselectタグの中身が変化するものがあります。
今回その選択が２つあるのですが、選択肢の中身が全く同じです

html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5        <meta content="86400" http-equiv="Expires" >
6            
7            <script type = "text/javascript">
8                <!--
9                function select1()
10                {
11                    var select1 = document.forms.formName.selectName1;
12                    var select2 = document.forms.formName.selectName2;
13                    
14                    select2.options.length = 0;
15                    
16                    if (select1.options[select1.selectedIndex].value == "TV")
17                    {
18                        select2.options[0] = new Option("SONY");
19                        select2.options[1] = new Option("PANA");
20                        select2.options[2] = new Option("TOSHI");
21                    }
22                    
23                    else if (select1.options[select1.selectedIndex].value == "PHONE")
24                    {
25                        select2.options[0] = new Option("APPLE");
26                        select2.options[1] = new Option("GOOGLE");
27                        select2.options[2] = new Option("ANDOROID");
28                    }
29
30                }
31            
32            function select2()
33            {
34                var select1 = document.forms.formName.selectName3;
35                var select2 = document.forms.formName.selectName4;
36                
37                select2.options.length = 0;
38                
39                if (select1.options[select1.selectedIndex].value == "TV")
40                {
41                    select2.options[0] = new Option("SONY");
42                    select2.options[1] = new Option("PANA");
43                    select2.options[2] = new Option("TOSHI");
44                }
45                
46                else if (select1.options[select1.selectedIndex].value == "PHONE")
47                {
48                    select2.options[0] = new Option("APPLE");
49                    select2.options[1] = new Option("GOOGLE");
50                    select2.options[2] = new Option("ANDOROID");
51                }
52                
53            }
54
55            //-->
56                </script>
57</head>
58
59<body bgcolor onLoad="select1();select2()">
60    <form name="formName" method="post" action="./pathToProgramFile">
61
62        <select name = "selectName1" onChange="select1()">
63            <option value = "TV">TV</option>
64            <option value = "PHONE">PHONE</option>
65
66        </select>
67
68        <select name = "selectName2">
69        </select>
70        
71        <select name = "selectName3" onChange="select2()">
72            <option value = "TV">TV</option>
73            <option value = "PHONE">PHONE</option>
74            
75        </select>
76        
77        <select name = "selectName4">
78        </select>
79        
80        </body>

この場合 select()1とselect()2 でやっていることはほぼ同じなのですが、これをまとめる事とかは可能でしょうか？
したい事として、関数の中の if の所（選択肢２個めの方）だけを別のファイルに書いてincludeするなど、何か方法を教えて頂きたいと思います
よろしくお願いします

行動規範の内容に同意します

回答2件

ベストアンサー

コードをあまり変えない方向で。

JavaScript
1function select1() {
2	select( document.forms.formName.selectName1, document.forms.formName.selectName2 );
3}
4function select2() {
5	select( document.forms.formName.selectName3, document.forms.formName.selectName4 );
6}
7function select( select1, select2 ) {
8	select2.options.length = 0;
9	if ( select1.options[ select1.selectedIndex ].value == "TV") {
10		select2.options[0] = new Option("SONY");
11		select2.options[1] = new Option("PANA");
12		select2.options[2] = new Option("TOSHI");
13	} else if ( select1.options[ select1.selectedIndex ].value == "PHONE") {
14		select2.options[0] = new Option("APPLE");
15		select2.options[1] = new Option("GOOGLE");
16		select2.options[2] = new Option("ANDOROID");
17	}
18}

投稿2017/07/25 02:26

kei344

総合スコア69400

satoshi501

2017/07/25 03:12

ありがとうございます思っていたとおりのことができました！

行動規範の内容に同意します

以下のselectを取得している部分を

javascript
1// select1()
2var select1 = document.forms.formName.selectName1;
3var select2 = document.forms.formName.selectName2;
4
5// select2()
6var select1 = document.forms.formName.selectName3;
7var select2 = document.forms.formName.selectName4;

以下のように動的にすれば、コードの一本化ができます。
合わせてHTMLも修正してください。

javascript
1      function select(_parentSelect, _childSelect)
2      {
3        var parentSelect = typeof _parentSelect === 'string' ? document.forms.formName[_parentSelect] : _parentSelect;
4        var childSelect = document.forms.formName[_childSelect];
5        
6        childSelect.options.length = 0;
7
8        if (parentSelect.options[parentSelect.selectedIndex].value == "TV")
9        {
10          childSelect.options[0] = new Option("SONY");
11          childSelect.options[1] = new Option("PANA");
12          childSelect.options[2] = new Option("TOSHI");
13        }
14
15        else if (parentSelect.options[parentSelect.selectedIndex].value == "PHONE")
16        {
17          childSelect.options[0] = new Option("APPLE");
18          childSelect.options[1] = new Option("GOOGLE");
19          childSelect.options[2] = new Option("ANDOROID");
20        }
21      }

html
1  <body bgcolor onLoad="select('selectName1', 'selectName2');select('selectName3', 'selectName4')">
2    <form name="formName" method="post" action="./pathToProgramFile">
3      <select name = "selectName1" onChange="select(this, 'selectName2')">
4        <option value = "TV">TV</option>
5        <option value = "PHONE">PHONE</option>
6
7      </select>
8
9      <select name = "selectName2">
10      </select>
11
12      <select name = "selectName3" onChange="select(this, 'selectName4')">
13        <option value = "TV">TV</option>
14        <option value = "PHONE">PHONE</option>
15
16      </select>
17
18      <select name = "selectName4">
19      </select>
20    </form>
21  </body>