從下拉菜單訪問所選值

我在從下拉菜單訪問選定值時遇到問題。當我嘗試訪問在javascript函數displayPhoto中選擇的值時，根本沒有任何值被訪問（我試圖在文本字段中將其打印出來）。難道我做錯了什麼？謝謝！從下拉菜單訪問所選值

下面是HTML的一部分：（我曾經嘗試這樣做的的 'onClick'和'的onchange'，都不起作用）

<form id="colorChoice"> 
    <img id="photo" src="red.jpg" alt="red" /> 
    <select name="color" size=5> 
     <option value="red" onclick="jsFunction()">Red</option> 
     <option value="blue" onclick="jsFunction()">Blue</option> 
     ... 
    </select> 
</form>

這裏是JavaScript部分：

function jsFunction(){ 
    var imageFile; = document.getElementById("colorChoice").color.value + ".jpg"; 
    ... 
}

來源

2013-07-15 Clueless Gorilla

謝謝大家的回答，我意識到錯誤，這是愚蠢的';'我曾經'imageFile' –

你需要把onchange在select ELEM ENT。

<form id="colorChoice"> 
    <img id="photo" src="red.jpg" alt="red" /> 
    <select name="color" id="color" size="5" onchange="jsFunction()"> 
     <option value="red">Red</option> 
     <option value="blue">Blue</option> 
     ... 
    </select> 
</form>

療法也是;在鏡像文件中的函數盈

function jsFunction(){ 
var imageFile = document.getElementById('color').value + '.jpg'; 
alert(imageFile); 
}

來源

2013-07-15 14:55:55 cocco

我試過了，它也不管用... –

你把'onchange'放在'select'元素上？再次閱讀答案。 – cocco

你有'onclick'的'選項'元素..這是錯誤的。 – cocco

你的HTML部分是這樣的

<form id="colorChoice"> 
    <img id="photo" src="red.jpg" alt="red" /> 
    <select name="color" size="5" onchange="jsFunction()"> 
     <option value="red">Red</option> 
     <option value="blue">Blue</option> 
     ... 
    </select> 
</form>

，你JScript的部分將是這樣的

function jsFunction(){ 
    var imageFile = document.getElementById("colorChoice").color.value + ".jpg"; 
    ... 
}

來源

2013-07-15 15:01:42

這也不起作用 –

當您使用getElementById時，您無法通過「name」屬性選擇項目。而是設置一個ID爲選擇標籤，就像這樣：

<form id="colorChoice"> 
     <img id="photo" src="red.jpg" alt="red" /> 
     <select id="color" size="5" onchange="jsFunction()"> 
      <option value="red">Red</option> 
      <option value="blue">Blue</option> 
      ... 
     </select> 
    </form>

，然後讓JS如下：

function jsFunction(){ 
    var imageFile = document.getElementById("color").value + ".jpg"; 
    ... 
}

另外請注意，我已經採取了的onchange（）事件作爲上述答案提示。

來源

2013-07-15 15:07:32 Toiletduck

從下拉菜單訪問所選值

回答

相關問題