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个工作副本为所有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.

细节位于名为location的div中。 div class =＆＃34; location＆＃34;

    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个商店创建一个下拉菜单，用户选择一个，在一个选项上，一个图像弹出div1，细节弹出到div 2.为什么它一直要求我更多的darn细节，令人讨厌。有任何想法吗？谢谢:)

Answer 1

这有用吗？

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>

下拉菜单更改页面

1 个答案: