ドロップダウンメニューの変更ページ

Question

ユーザーがホームページで店舗を選択したときに、小さな画像と詳細を追加しようとしています。しかし、私は、詳細が同時に選択され、メインページの領域にどのように配置されるのかを考え出すことはできません。

ここにhtmlがあります。

<div class="storeDetails"> 
        <select id="storeDropdown" onchange=> 
         <option value="locationOne"><div class="buttonItem">Sandusky</div></option> 
         <option value="locationTwo">><div class="buttonItem">Bad Axe</div></option> 
         <option value="locationThree">><div class="buttonItem">Imlay City</div></option> 
         <option value="locationFour">><div class="buttonItem">Port Huron</div></option> 
        </select> 
        <div class="storeInformation"> 
         <div class="location"> 
          <label class="locationDetails"></label> 
         </div> 

これはJSです。 - 私は1が働いていたことを確認したかったので、1点の作品が詳細は場所と呼ばれるdivの中にあるすべての3

// the array of images  
    var images=["./images/bad_axe.gif", "./images/sandusky.gif", "./images/port_huron.gif", "./images/imlay_city.gif"] 

//this first part is functional i can get a store image to be selected when the dropdownmenu item has been selected. 

    function storeSelect(selectedStore){ 
    var storeImage = document.getElementById('miniStorepicture') 
    var storeInformation = document.getElementById("storeInformation"); 
     if(this.value == "locationOne"){ 
      storeImage.src=images[0]; 
     storeInformation.innerHTML=information[0]; 
     } 
     else if(this.value == "locationTwo"){ 
      storeImage.src=images[1]; 
      storeInformation.innerHTML=information[1]; 
     } 
     else if(this.value == "locationThree"){ 
      storeImage.src=images[2]; 
      storeInformation.innerHTML=information[2]; 
     } 
     else {storeImage.src=images[3]; 
      storeInformation.innerHTML=information[3]; 
     } 
     } 

    window.onload=function(){ 
     var selectedStore = document.getElementById("storeDropdown"); 
     selectedStore.onchange=storeSelect; 

    } 
// this is the first store details, there's 3 more, I just haven't added all 3 in here. I can't get this to populate, and for some reason it renders the top picture javascript part, non-functional where it was before. 

のためにコピーする場合、私は、情報の配列を完了していません。 DIV CLASS =「位置」

var storeInfo=["Bad Axe 707 N Van Dyke Rd Bad Axe MI 48413 P:989-269-9251 or 800-566-3565 F: 989-269-9821, "] 

    function storeLocation(selectedStore){ 
    var storeAddress = document.getElementById('locationDetails') 
    var location = document.getElementById("location"); 
     if(this.value == "locationOne"){ 
      storeAddress.label=storeInfo[0]; 
     location.innerHTML=storeIinfo[0]; 
     } 
     else if(this.value == "locationTwo"){ 
      storeAddress.src=storeInfo[1]; 
      location.innerHTML=information[1]; 
     } 
     else if(this.value == "locationThree"){ 
      storeAddress.src=storeInfo[2]; 
      location.innerHTML=information[2]; 
     } 
     else {storeAddress.src=storeInfo[3]; 
      location.innerHTML=information[3]; 
     } 
     } 
    // so here is the function to write to the screen 

    window.onload=function(){ 
     var selectedStore = document.getElementById("storeDropdown"); 
     selectedStore.onchange=storeLocation; 
     console.log(storeInfo); 

    } 

項目が選択された後ので、アイデアは、画像及び細部の両方が2つの異なる領域（divを）移入、ドロップダウンメニューからで並べ。 なぜこのことは、詳細が不十分で、私に気づいていますか？

私の頭の中では本当にシンプルなので、4つの店舗のドロップダウンメニューを作成し、1つの選択肢で1つの選択肢を選択し、div1の画像をポップし、詳細をdiv2にポップします。その細部、その迷惑な。 アイデアありがとう:)

Answer 1

これは機能しますか？ FYI

function validate() { 
 

 
    var y = document.getElementById("dropdown"); 
 
    var x = y.options[y.selectedIndex].value; 
 

 
    if (x == 0) { 
 
    document.getElementById("text").innerHTML = "Default text"; 
 
    document.getElementById("image").src = "default.jpg"; 
 
    } 
 

 
    if (x == 1) { 
 
    document.getElementById("text").innerHTML = "This is the caption for picture 1"; 
 
    document.getElementById("image").src = "picture1.jpg"; 
 
    } 
 

 
    if (x == 2) { 
 
    document.getElementById("text").innerHTML = "This is the caption for picture 2"; 
 
    document.getElementById("image").src = "picture2.jpg"; 
 
    } 
 

 
    if (x == 3) { 
 
    document.getElementById("text").innerHTML = "This is the caption for picture 3"; 
 
    document.getElementById("image").src = "picture3.jpg"; 
 
    } 
 

 
}

<center> 
 
    <select id="dropdown"> 
 
    <option value="0">- Select -</option> 
 
    <option value="1">Option 1</option> 
 
    <option value="2">Option 2</option> 
 
    <option value="3">Option 3</option> 
 
    </select> 
 
    <button onClick="validate()" class="button big">Update</button> 
 
    <br /> 
 
    <br /> 
 
    <td><img src="" id="image"></img> 
 
    </td> 
 
    <br /> 
 
    <p id="text">Default text.</p> 
 
</center>