if..else ..用選擇框值javascript和html

Question

我有一個選擇框有三個不同的選項（4個真的是空白的）和我點擊一個按鈕后我需要一個警告框來顯示一條消息。 這是一些代碼。

HTML：

<select id="item1" name="Item 1">
      <option></option>
      <option value="1">Camera</option>
      <option value="2">Microphone</option>
      <option value="3">Tripod</option>
    </select>

    <button onclick="message()">Go!</button>

使用Javascript：

    <SCRIPT language = javascript>

function message() {

var s = document.getElementById('item1');
var item1 = s.options[s.selectedIndex].value;

if (item1 = 1) {
    alert("it equals camera")
}
else if (item1 = 2) {
    alert("it equals microphone")
}
else if (item1 = 3) {
    alert("it equals tripod")
}
}

</SCRIPT>

每次我點擊按鈕時，警告框都會顯示“它等於相機”。 我可以選擇麥克風並單擊按鈕，它仍然會說。

如果我放

alert(item1)

在它顯示1,2或3的函數中。所以我假設它是if..else ..語句的東西。

Answer 1

在JavaScript中我們應該使用=== ，這也會檢查數據類型 。

Answer 2

記得使用==而不是=

if(item == 1)

代替

if(item = 1)

Answer 3

更換

if (item1 = 1) {

同

if (item1 == 1) {

（和其他的一樣）

item = 1更改item1的值並返回1 ，在測試中計算結果為true 。

但請注意，您可以更有效率

• 使用開關
• 或直接讀取值

例如 ：

document.getElementById('item1').onchange = function(){
    alert("it equals " + this.options[this.selectedIndex].innerHTML);        
}​​​​​​​​

示范

Answer 4

在JavaScript（幾乎所有其他大括號語言）中，單個=總是意味着分配 。 因此，您將值1分配給item1 。

你想要比較運算符 == 。

function message() {
    var s = document.getElementById('item1');
    var item1 = s.options[s.selectedIndex].value;

    if(item1 == '1') {
        alert("it equals camera")
    } else if(item1 == '2') {
        alert("it equals microphone")
    } else if(item1 == '3') {
        alert("it equals tripod")
    }
}

以下是一些改進代碼的其他建議：

• 不要使用<script>的已棄用language屬性。 如果你想明確的話，只需<script>就可以使用JavaScript或<script type="text/javascript> 。
• 不要使用內聯事件。 而不是onclick="..."使用addEventListener()方法注冊事件處理程序。

Answer 5

為什么不使用這種方法，當你的選擇器獲得更多項目時更容易？

var s = document.getElementById("item1");
var item1 = s.options[s.selectedIndex].text;
window.alert('it equals '+item1);

編輯： JSFiddle

編輯2：更改=到==解決您的問題。 而不是使用s.options[s.selectedIndex].value你可以簡單地使用s.selectedIndex 。 這也將返回1,2或3，這更容易理解。