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

Question

當某人從HTML下拉列表中進行特定選擇時，我想顯示一條消息。 到目前為止，我有：

<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();
        }
    });
});

以上似乎不適用於我，有什么建議嗎？ 我還希望能夠在多個選定值上顯示該消息。

Answer 1

$('#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');
    });
});

Answer 2

好吧，您的.change函數專門綁定到具有id="configoption[56]"的元素，因此只需將id添加到您的select元素中，如下所示

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

---

UPDATE

按照@TJCrowder關於無效selector的建議，我想對id進行一點更改。 您可以使用configoption56作為id並編寫您的select.change ，如下所示：

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

.change

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

Answer 3

我應該這樣做： 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();
        }

    });
});

Answer 4

您的方法需要一些修改。 您要做的所有這些更改

$(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