如何使用javascript顯示特定下拉選擇的消息？

我想在某人從HTML下拉列表中進行特定選擇時顯示一條消息。我有這個至今：如何使用javascript顯示特定下拉選擇的消息？

<select name="configoption[56]" onchange="recalctotals()"> 
<option value="235"">USA</option> 
<option value="206">Europe</option> 
</select> 

<span class="message">You selected USA!</span>

和腳本：

$(document).ready(function() { 
    $('#configoption[56]').change(function() { 
     var selectedValue = $('#configoption[56]').find(":selected").text(); 
     if (selectedValue == '235') { 
      $('.message').show(); 
     } else { 
      $('.message').hide(); 
     } 
    }); 
});

以上似乎並不爲我工作，有什麼建議？我還希望能夠在多個選定的值上顯示消息。

來源

2015-07-20 Conserta

如果下面的答案*答案*您的問題，堆棧溢出的工作方式，您將通過單擊旁邊的複選標記「接受」的答案; [詳細信息]（/ help/someone-answers）。但是，只有當你的問題得到解答時，如果不是，請考慮通過「編輯」鏈接爲問題添加更多詳細信息。 –

$('#configoption[56]')正在尋找一個元素與id，不name，configoption[56]（或者它會是這樣，但選擇是無效的，你不得不逃離那些括號內）。

要使用的名稱：

$('select[name="configoption[56]"]')...

另外，你可以只使用val，你不必使用find獲得所選擇的選項。您還可以使用toggle爲顯示/隱藏：

$(document).ready(function() { 
    $('select[name="configoption[56]"]').change(function() { 
     $('.message').toggle($(this).val() == '235'); 
    }); 
});

回覆您的評論對切換基於||和兩個值：

$(document).ready(function() { 
    $('select[name="configoption[56]"]').change(function() { 
     var value = $(this).val(); 
     $('.message').toggle(value == '235' || value == '123'); 
    }); 
});

來源

2015-07-20 04:13:30

這似乎也很好。我喜歡切換動畫。有沒有一種方法可以切換兩個vals？我加了||和另一個val，但它只是打開和關閉。 – Conserta

@Conserta：'toggle'不是動畫。是的，您可以使用多個值，這些規則與if：if（value == x || value == y）'相同。這聽起來像你沒有在正確的地方有'||'。（如果你要檢查多個值，我會將'$（this）.val（）'的結果存儲在一個變量中。） –

@Conserta：我已經添加了一個示例。 –

嗯，你.change功能是專門綁定到與元素id="configoption[56]"因此，只需將ID添加到您的select元素中，如下所示

<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()"> 
    //Options 
</select>

UPDATE

按@ T.J.Crowder對無效selector建議，我想修改對id略有變化。您可以使用configoption56 id和寫你select.change如下：

<select name="configoption[56]" id="configoption56" onchange="recalctotals()"> 
     <!--Options--> 
</select>

.change

$('#configoption56').change(function() { 
    //other codes 
});

來源

2015-07-20 04:15:53

選擇器'#configoption [56]'是[invalid]（http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier）（它需要轉義）。當前的jQuery *可能會讓它工作（它允許一些其他無效的id選擇器，如果它們自己的話），但它可能不會（你必須檢查），並且不能保證如果它*現在*下一個點的發佈不會打破它，因爲（再次）它是無效的。 –

@ T.J.Crowder。對不起，但你可以讓我知道如何？ –

您不能在'id'選擇器中使用未轉義的'''''''''。（注意我說的是''id''選擇器「，而不是'id's，它們在'id's中是完全有效的。）轉義版本真的很難讀：'#configoption \ 5b56 \ 5d'，甚至更難寫入字符串文字：'「#configoption \\ 5b56 \\ 5d」'。 –

我應該做這樣的：http://jsfiddle.net/nmn17cr6/

HTML：

<select name="configoption[56]" id="configoption" onchange="recalctotals()"> 
<option value="1">Dummy</option> 
<option value="235">USA</option> 
<option value="206">Europe</option> 
</select> 
<span class="message">You selected USA!</span>

CSS：

.message { 
    display:none; 
}

的jQuery：

$(document).ready(function() { 

    $('#configoption').change(function() { 

     var selectedValue = $(this).val(); 

     if (selectedValue == '235') { 
      $('.message').show(); 
     } else { 
      $('.message').hide(); 
     } 

    }); 
});

來源

2015-07-20 04:18:34

這似乎工作得很好，謝謝，我想添加多個值來顯示消息。我試過如果（selectedValue =='235'&&'202'）但它似乎沒有工作。有關於此的任何想法？ – Conserta

我想通了||咄！謝謝你的回答！我不能投票尚未:( – Conserta

我說話有點太快了||似乎從當不同選項被選中隱藏禁用的消息。上？ – Conserta

你的方法需要稍加修改。所有你必須做的這些改變

$(document).ready(function() { 
$("select[name=configoption[56]]").change(function() { // change jquery selector for name 
    var selectedValue = $('#configoption[56]').val(); // and val to get the value 
    if (selectedValue == '235') { 
     $('.message').show(); 
    } else { 
     $('.message').hide(); 
    } 
}); 
});

並與jQuery代碼相同。下面必須是

<select name="configoption[56]" > 
    // onchange="recalctotals()"> was not required

來源

2015-07-20 04:52:55

如何使用javascript顯示特定下拉選擇的消息？

回答

相關問題