ドロップダウンリストを作成して、画像を生成する依存ドロップダウン

これは愚かで簡単な質問である場合は非常にごめんなさい。私は独学で知識が限られているので、javascriptは私がよく知っているものではありません。残念ながら、これはかなり速い修正が必要です。ドロップダウンリストを作成して、画像を生成する依存ドロップダウン

データベースにリンクされたドロップダウンメニューを作成しようとしています。ドロップダウン1には3つのオプションが表示されます（あらかじめ選択されているものはデータベースクエリに依存します）。オプション2または3が選択されている場合は、ドロップダウン1 - オプション2またはドロップダウン1 - オプション3に対応する選択肢の一覧が表示されます。

最後に、ドロップダウン2から選択すると、選択に対応します。

データベース照会で自動選択されたオプションがドロップダウンとイメージの両方に対応する場合は、これが自動的に表示されます（最初は再選択されません）。

私はこれまでに見つけたさまざまなstackoverflowの回答をまとめましたが、これまでにJSFiddleが90％働いています（私が理解できない唯一のことは、 "選択された"オプションがそうしなければならない場合、オプション）。

しかし、私のウェブサイトでは動作させることができません。私はそうのようなjQueryのファイルを呼び出す私のコードの開始時：

<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>

コード自体はここにある：それは結局のところ

<?php 

$USERINFO = $mysqli->query("SELECT * FROM members WHERE id = '$USERID'");   
$USERINFO = $USERINFO->fetch_object(); 

echo "<div style=\"width: 49%; display: inline-block;\"> 

<script language=\"JavaScript\" type=\"text/javascript\"> 

// linking values to dropdowns 
var ranksLists = { 
    'Rebel Alliance': '#rebel-ranks', 
     'Empire': '#empire-ranks', 
}; 

$('select[name=alliance]').change(function(){ 

    //hide all extra lists 
    $('.hide').hide(); 

    //get current value 
    var value = $(this).val(); 

    //if there is a list for this value, show it 
    if (value in ranksLists){  
    $(ranksLists[value]).show(); 
    } 

}); 

var rebeldata = { 
    'Recruit' : { img: '' }, 
    'Corporal' : { img: '/images/ranks/rebel/corporal.png' }, 
    'Sergeant' : { img: '/images/ranks/rebel/sergeant.png' }, 
    'Lieutenant' : { img: '/images/ranks/rebel/lieutenant.png' }, 
    'Captain' : { img: '/images/ranks/rebel/captain.png' }, 
    'Commander' : { img: '/images/ranks/rebel/commander.png' }, 
    'Wing Commander' : { img: '/images/ranks/rebel/wingcommander.png' }, 
    'Major' : { img: '/images/ranks/rebel/major.png' }, 
    'Commodore' : { img: '/images/ranks/rebel/commodore.png' }, 
    'Colonel' : { img: '/images/ranks/rebel/colonel.png' }, 
    'Admiral' : { img: '/images/ranks/rebel/admiral.png' }, 
    'Brigadier' : { img: '/images/ranks/rebel/brigadier.png' }, 
    'General' : { img: '/images/ranks/rebel/general.png' }, 
}; 

$('.rebel-rankbadge').change(function() { 
    var value = $(this).val(); 
    if (rebeldata[value] != undefined) 
    { 
     $('#rank-image').attr('src', rebeldata[value].img); 
    } 
}); 
</script> 

     <div>Alliance : </div> 
     <div> 
     <select name=\"alliance\" id=\"ranks\">"; 

     $alliance = array("Neutral" => "Neutral", 
         "Rebel Alliance" => "Rebel Alliance", 
         "Empire" => "Empire"); 

      foreach ($alliance as $a => $d) { 

        echo "<option value=\"$a\""; 

       if ($a == $USERINFO->alliance) echo " selected"; 

       echo "> " . $d . "</option>"; 
     } 

     echo " 

     </select> 

     <select name=\"rank\" id=\"rebel-ranks\" class=\"hide rebel-rankbadge\">"; 

     $rank = array("Civilian" => "Civilian", 
        "Recruit" => "Recruit", 
        "Corporal" => "Corporal", 
        "Sergeant" => "Sergeant", 
        "Lieutenant" => "Lieutenant", 
        "Captain" => "Captain", 
        "Commander" => "Commander", 
        "Wing Commander" => "Wing Commander (Navy)", 
        "Major" => "Major (Army)", 
        "Commodore" => "Commodore (Navy)", 
        "Colonel" => "Colonel (Army)", 
        "Admiral" => "Admiral (Navy)", 
        "Brigadier" => "Brigadier (Army)", 
        "General" => "General"); 

      foreach ($rank as $key => $value) { 

        echo "<option value=\"$key\""; 

       if ($key == $USERINFO->rank) echo " selected"; 

       echo "> " . $value . "</option>"; 

     } 

     echo " 

     </select> 

     <select name=\"rank\" id=\"empire-ranks\" class=\"hide empire-rankbadge\"> "; 

     $rank = array("Evil Civilian" => "Evil Civilian", 
        "Evil Recruit" => "Evil Recruit", 
        "Evil Corporal" => "Evil Corporal", 
        "Evil Sergeant" => "Evil Sergeant", 
        "Evil Lieutenant" => "Evil Lieutenant", 
        "Evil Captain" => "Evil Captain", 
        "Evil Commander" => "Evil Commander", 
        "Evil Wing Commander" => "Evil Wing Commander (Navy)", 
        "Evil Major" => "Evil Major (Army)", 
        "Evil Commodore" => "Evil Commodore (Navy)", 
        "Evil Colonel" => "Evil Colonel (Army)", 
        "Evil Admiral" => "Evil Admiral (Navy)", 
        "Evil Brigadier" => "Evil Brigadier (Army)", 
        "Evil General" => "Evil General"); 

      foreach ($rank as $key => $value) { 

        echo "<option value=\"$key\""; 

       if ($key == $USERINFO->rank) echo " selected"; 

       echo "> " . $value . "</option>"; 

     } 

     echo " 

     </select> 

     </div> 

     <div><img id=\"rank-image\" src=\" \" /></div> 

     </div>"; ?>

出典

2017-05-10 tiny_trevor