title: Change image src by using multiple select
body: <p>I would like to change image using multiple select.</p>
  
  <p>Referring to the <a href="https://stackoverflow.com/questions/14069917/change-image-using-multiple-select-and-javascript">QUESTION </a>
  The structure will be exactly the same as the above code.</p>
  
  <p>But using <code>&lt;select&gt;</code> and  <code>&lt;option&gt;</code> is not suitable for my case.
  I would like to use <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> (or <code>&lt;div&gt;</code> and <code>&lt;a&gt;</code> )instead.
  I have tried to edit with it, but the javascript cannot recognize the value.</p>
  
  <p>I am totally new to javascript.
  And I don't know how to modify the code.
  Please help and many thanks.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;img id="imageToSwap" src="img/red.jpg"&gt;
  
  &lt;select id="colour" onChange="swapImage()"&gt;
      &lt;option value="red"&gt;Red&lt;/option&gt;
      &lt;option value="green"&gt;Green&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="size" onChange="swapImage()"&gt;
      &lt;option value="small"&gt;Small&lt;/option&gt;
      &lt;option value="large"&gt;Large&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function swapImage(){
          var image = document.getElementById("imageToSwap");
          var color = document.getElementById("colour").value;
          var size = document.getElementById("size").value;
  
          image.src = "img/" + size + "_" + color + ".jpg";
      };
  &lt;/script&gt;
  </code></pre>