変化画像とテキストダウン選択した各ドロップで画像やテキストを変更するために探して

Question

イム。画像を変更するコードがあります。しかし、私はどこにテキストを追加する必要はありません。例 - 誰かがなどのオプション2とのための画像とテキストの変更2オプションをクリックした場合、誰かが、オプション1用の画像とテキストの変更1オプションをクリックすると。同様に、各オプションとともにリンクを追加することにしているとも言えますが、それらも変更されます。

は何が必要

  <img id="image" src="Null_Image.png" /> <br /> 
      <select id="imgList"> 
       <option value="1.png">Select Option</option> 
       <option value="2.png">One 1</option> 
       <option value="3.png">Two 2</option> 
       <option value="4.png">Three 3</option> 
      </select> 




      <script> 
      function setClass() { 
       var img = document.getElementById("image"); 
       img.src = this.value; 
       return false; 
      } 
      document.getElementById("imgList").onchange = setClass; 
      </script> 

Answer 1

をありがとう、あなたがこのような何かをしようと、単一の値で複数のデータ片を付けることができますので、あなたのドロップダウン値の区切りです：

 <img id="image" src="Null_Image.png" /> <br /> 
     <div id="fillText"> select something </div> 
     <select id="imgList"> 
      <option value="1.png|some text for 1">Select Option</option> 
      <option value="2.png|other text here">One 1</option> 
      <option value="3.png|a fancy title">Two 2</option> 
      <option value="4.png|an interesting tidbit">Three 3</option> 
     </select> 

     <script> 
     function setClass() { 
      var img = document.getElementById("image"); 
      var fillText = document.getElementById("fillText"); 
      // generate an array by splitting the value on '|' 
      var values = this.value.split('|'); 
      img.src = values[0]; // the first array value 
      fillText.innerHTML = values[1]; // the second array value 
      return false; 
     } 
     document.getElementById("imgList").onchange = setClass; 
     </script> 

これはさせてくださいそのオプション値で作業するためにいくつかの項目をスタックします。それを分割して個別に使用することで、望ましい結果を達成できるはずです。

データをより複雑になる、オブジェクトに格納検討し、必要なデータを検索するためのキーとして、ドロップダウン値を使用する場合：

 <img id="image" src="Null_Image.png" /> <br /> 
     <div id="fillText"> select something </div> 
     <select id="imgList"> 
      <option value="valueOne">Select Option</option> 
      <option value="valueTwo">One 1</option> 
      <option value="valueThree">Two 2</option> 
      <option value="valueFour">Three 3</option> 
     </select> 

     <script> 

     var lookupValues = { 
      'valueOne': { 
      'img':'1.png', 
      'txt':'some text for 1' 
      }, 
      'valueTwo': { 
      'img':'2.png', 
      'txt':'other text here' 
      }, 
      'valueThree': { 
      'img':'3.png', 
      'txt':'a fancy title' 
      }, 
      'valueFour': { 
      'img':'4.png', 
      'txt':'an interesting tidbit' 
      } 
     }; 

     function setClass() { 
      var img = document.getElementById("image"); 
      var fillText = document.getElementById("fillText"); 
      // get the lookup values with a key matching this.value 
      var values = lookupValues[this.value]; 
      img.src = values['img']; // the 'img' value 
      fillText.innerHTML = values['src']; // the 'src' value 
      return false; 
     } 
     document.getElementById("imgList").onchange = setClass; 
     </script> 

あなたはユニークな心配をせずに任意の複雑なデータを使用することができます。この方法区切り文字など

幸運！考慮すべき

Answer 2

一つの方法は、data-接頭辞を使用して<option>タグ内のカスタムデータ属性を設定することです。あなたは、その要素のdatasetプロパティを介してデータにアクセスすることができますか、あなたは古いブラウザをサポートする必要がある場合は、getAttribute('data-nameofyourproperty')：

var img = document.getElementById("image"); 
 
var text = document.getElementById("text"); 
 

 
function setClass(e) { 
 
    var select = e.target; 
 
    img.src = select.options[select.selectedIndex].value; 
 
    text.innerHTML = select.options[select.selectedIndex].dataset.description; 
 
    // use select.options[select.selectedIndex].getAttribute('data-description'); if you need to support older browsers 
 
    return false; 
 
} 
 

 
document.getElementById("imgList").onchange = setClass;

<select id="imgList"> 
 
    <option value="https://http.cat/101" data-description="101 message">Select Option</option> 
 
    <option value="https://http.cat/202" data-description="202 message">One 1</option> 
 
    <option value="https://http.cat/303" data-description="303 message">Two 2</option> 
 
    <option value="https://http.cat/404" data-description="404 message">Three 3</option> 
 
</select> 
 
<p id="text">Default text</p> 
 
<img id="image" width="400" height="320" src="https://http.cat/100" /> 
 
<br />

MDNがusing data attributesの詳細を持っています。