Cannot read property 'undefined' of undefined というエラー

Question

前提・実現したいこと

通販サイトの
検索機能に「サイズ」等の規格を追加するカスタマイズを行っており、
開発環境で実装実現いたしましたが、
本番環境にアップするとなぜかうまくいきません。

GooglechromeDevで調査すると
以下のようなエラーメッセージが発生したことが判明いたしました。

開発環境で再度動作の確認、
及びGooglechromeDevで視ても
問題なく動くのですが、
本番環境だとやはりどうにもこうにもという感じです。

もう１点不明なことが、
本番環境にアップして間もない時は、本番環境でも問題なく動作しました。
※1.しかしながら、本番環境にて商品を一旦一括削除し
再度商品をアップしたら、上記のような事象が発生しました。

ご回答ありがとうございます。
エラー検知該当箇所は以下でございます。

　var num = document.form1.search_classcategory_id.selectedIndex;

特に開発環境では同様の箇所に値が入るのですが、
本番環境では「undefined」となってしまいます。

原因がわからなく、1日以上悩んでいる状態です。
どなた様か、アドバイスをいただけたら非常に幸いです。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'undefined' of undefined

該当のソースコード

<script type="text/javascript">
    function func_submit_class( id, class_name ){
        var fm = window.opener.document.form1;
        var num = document.form1.search_classcategory_id.selectedIndex;
        var classcategory_val = document.form1.search_classcategory_id.options[num].value;
        var err_text = '';
        
        fm.mode.value = 'select_product';
        fm.select_classcategory_id.value = classcategory_val;
        fm.select_product_id.value = id;
        fm.select_rank.value = '119';
        if(fm.select_pos){
	        fm.select_pos.value = '';
		}
        if (classcategory_val == '__unselected') {
            err_text = class_name + "を選択してください。\n";
        }
        if (err_text != '') {
            alert(err_text);
            return false;
        }
	
        fm.submit();
        window.close();
        return false;
    }
</script>

<form name="form1" id="form1" method="post" action="#">
    <table class="list">
        <col width="15%" />
        <col width="12.5%" />
        <col width="60%" />
        <col width="12.5%" />
        <tr>
            <th>商品画像</th>
            <th>商品コード</th>
            <th>商品名</th>
            <th>決定</th>
        </tr>
        
        <!--{foreach name=loop from=$arrProducts item=arr}-->
        <!--▼商品<!--{$smarty.foreach.loop.iteration}-->-->
        <tr>
            <td class="center">
                <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arr.main_list_image|sfNoImageMainList|h}-->&width=65&height=65" alt="" />
            </td>
            <td>
                <!--{assign var=codemin value=`$arr.product_code_min`}-->
                <!--{assign var=codemax value=`$arr.product_code_max`}-->
                <!--{* 商品コード *}-->
                <!--{if $codemin != $codemax}-->
                    <!--{$codemin|h}-->～<!--{$codemax|h}-->
                <!--{else}-->
                    <!--{$codemin|h}-->
                <!--{/if}-->
            </td>
            <td>
                <!--{$arr.name|h}-->
                
                <!--{assign var=class1 value=classcategory_id`$arr.product_id`_1}-->
                <!--{assign var=classlist value=`$arrClassCat1List`}-->
                <!--{if $tpl_classcat_find1[$arr.product_id]|h}-->
                
                    <dt><!--{$tpl_class_name1[$arr.product_id]|h}-->：</dt>
                        <dd>
                            <select name="search_classcategory_id" id="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->">
                            <!--{foreach from=$arrClassCat1[$arr.product_id] key=key item=item}-->
                                <option value="<!--{$key|h}-->">
                                    <!--{$item|h}-->
                                </option>
                            <!--{/foreach}-->
                            </select>
                        </dd>
                <!--{else}-->
                        <input type="hidden" name="<!--{$class1}-->" id="<!--{$class1}-->" value="" />
                <!--{/if}-->
            </td>
            <!--{if $tpl_classcat_find1[$arr.product_id] == 'true'}-->
            <td class="center"><a href="" onClick="return func_submit_class('<!--{$arr.product_id}-->','<!--{$tpl_class_name1[$arr.product_id]|h}-->');">決定</a></td>
            <!--{else}-->
            <td class="center"><a href="" onClick="return func_submit(<!--{$arr.product_id}-->)">決定</a></td>
            <!--{/if}-->
        </tr>
        <!--▲商品<!--{$smarty.foreach.loop.iteration}-->-->
        <!--{/foreach}-->
        <!--{if !$tpl_linemax>0}-->
        <tr>
            <td colspan="4">商品が登録されていません</td>
        </tr>
        <!--{/if}-->

    </table>
    <!--{/if}-->
    <!--{* ▲検索結果表示 *}-->

</form>

試したこと

・開発環境にて※1と同様の操作を行っても
開発環境ではうまく動作してしまいます。

・現在の本番環境の該当するソースコードを
開発環境にコピペしても開発環境では正常動作してしまいます。

・データベースを確認致しましたが、
私が確認できる範囲ではデータの相違は見受けられませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[defghi1977]

エラー内容と共にエラーが発生した（ブラウザがエラーを検知した）箇所（スクリプト行）について追記願います.

[defghi1977]

あと、PHPコードのではなくてPHPで処理した結果得られたHTMLを確認(できれば開発環境と本番環境とで出力されたものを比較)して下さい.

Answer 1

TypeError: Cannot read property 'undefined' of undefined

TypeError: Cannot read property 'undefined' of undefined

エラーメッセージを解読して下さい。
日本語訳すれば「undefined 値の undefined プロパティを読み取れません」の意となり、次の疑似コードで再現可能です。

var obj;
obj.undefined; // TypeError: Cannot read property 'undefined' of undefined

一般に "undefined" という名前のプロパティを定義する状況は考えづらいですが、変数を利用しているならありえます。

var obj, prop;
obj[prop]; // TypeError: Cannot read property 'undefined' of undefined

当該エラー行の確認

エラー検知該当箇所は以下でございます。

var num = document.form1.search_classcategory_id.selectedIndex;

このコードで当該エラーが発生するとは考えられません。
なぜなら、undefined プロパティを参照するコードが存在しないからです。

いずれにしてもこれはオブジェクトの構造上の問題ですので、コンソールデバッグやbreakpointを設定して該当オブジェクトの中身が期待通りのものかを確認して下さい。

defghi1977 さんが仰るようにPHPが出力しているHTMLを確認して下さい。JavaScriptからすれば「出力されたHTML」が全てです。

複数の <select name="search_classcategory_id">

あまり深く読んでいませんが、<select name="search_classcategory_id"> が複数存在していませんか？
複数存在するなら、下記コードでエラーになりそうですが…。

var classcategory_val = document.form1.search_classcategory_id.options[num].value;

(2018/04/03 22:57追記)

疑似コードで再現出来ました。

<form name="form1" id="form1" method="post" action="#">
  <select name="search_classcategory_id">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
  <select name="search_classcategory_id">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
  <select name="search_classcategory_id">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
</form>

<script>
'use strict';
var num = document.form1.search_classcategory_id.selectedIndex;
console.log(num);   // undefined
console.log(document.form1.search_classcategory_id.options);    // undefined

var classcategory_val = document.form1.search_classcategory_id.options[num].value;    // TypeError: Cannot read property 'undefined' of undefined
</script>

Re: wa.shi さん

Comments

[wa.shi]

仰る通りでございました。
「class_category_id」が複数存在し、
「class_category_id」の中身のselectのoption値が読み取れず、
「undefined」となっているのが原因でした。
上記、selectのoption値を読み取るようにカスタマイズをしたら
解決致しました。
疑似コードまで明記頂き誠にありがとうございました。