在javascript函數中反映select狀態

Question

在javascript中你如何做到這一點，以便功能隨時可以改變？ 我想這樣做，當有人從下拉表單中選擇一個不同的選項時，將出現所選類型的圖像。 比如這樣的事情：

        newTexture(document.worktopForm.worktopColour.value);

    function newTexture() {
            var textureName = '<img src="'document.worktopForm.worktopColour.value'.jpg>';
            document.getElementById("texture").innerHTML += textureName;        
    }


        <form name="worktopForm">

        <label>Choose colour of Worktop (Please select one)</label><br/>
        <select name="worktopColour">
            <option value="none" selected></option>
            <option value="starGalaxy">Star Galaxy (££)</option>
            <option value="tanBrown">Tan Brown (£££)</option>
            <option value="coolColour">Cool Colour (££££)</option>
            <option value="nutYellow">Nut Yellow (£££££)</option>
        </select>

        <div id="texture"></div></form>

Answer 1

您可以在select onchange事件上調用任何函數

 <select id="worktopColour" onchange="newTexture();">


 function newTexture() {
        var textureName = document.getElementById("worktopColour");
        var  imagevalue=textureName.options[textureName.selectedIndex].value;        
 }

使用imagevalue變量。

Answer 2

修改功能： jsfiddle

 document.worktopForm.worktopColour.onchange =newTexture;

function newTexture() {

        var textureName = '<img src="' + this.value + '.jpg">';
        document.getElementById("texture").innerHTML += textureName;        
}

Answer 3

像這樣的東西？

<!DOCTYPE html>
<meta charset=UTF-8><!-- validates as html5 -->
<title>select from list</title>
<script>
function go () {
   var e = document.getElementById('worktopColour');
   document.getElementById('texture').innerHTML += 
   e.options[e.selectedIndex].value+'.jpg <br>';
}
</script>

<form>
<label>Choose colour of Worktop</label><br>
<select id=worktopColour onChange=go()>
   <option value=none selected=selected>
   <option value=starGalaxy>Star Galaxy (££)
   <option value=tanBrown>Tan Brown (£££)
   <option value=coolColour>Cool Colour (££££)
   <option value=nutYellow>Nut Yellow (£££££)
</select></form>
<div id=texture></div>

在javascript函數中反映select狀態

問題描述

3 個解決方案

解決方案1
2 已采納 2012-10-01 10:43:36

解決方案2
1 2012-10-01 10:44:15

解決方案3
0 2012-10-01 12:04:52

在javascript函數中反映select狀態

問題描述

3 個解決方案

解決方案1 2 已采納 2012-10-01 10:43:36

解決方案2 1 2012-10-01 10:44:15

解決方案3 0 2012-10-01 12:04:52

解決方案1
2 已采納 2012-10-01 10:43:36

解決方案2
1 2012-10-01 10:44:15

解決方案3
0 2012-10-01 12:04:52