web-dev-qa-db-ja.com

HTML <select> jQuery .changeが機能しない

なぜこれが機能しないのかわかりません。とてもシンプルに見えます。

これが私のドロップダウンメニューです。

<div>
    <form>
        <select id='yearDropdown'>
            <c:forEach var="years" items="${parkYears}">
                <option value=/events.html?display_year=${years}<c:if test="${currentYear == years}">selected="selected"</c:if>>${years}</option>
            </c:forEach>
        </select>
    </form>
</div>

そしてここにJavaScriptがあります

$("#yearDropdown").change(function () {
    alert('The option with value ' + $(this).val());
});

現在、機能を追加できるように機能させたいだけです。ありがとう！

javascriptjqueryselectdrop-down-menujstl
14
theCamburglar

そのコードは構文的に正しいです。ほとんどの場合、間違ったタイミングで実行されています。

DOMの準備ができたときにイベントをバインドする必要があります：

$(function(){ /* DOM ready */
    $("#yearDropdown").change(function() {
        alert('The option with value ' + $(this).val());
    });
});

または、liveを使用します。

$("#yearDropdown").live('change', function() {
    alert('The option with value ' + $(this).val());
});

または、delegateを使用します。

$(document.body).delegate('#yearDropdown', 'change', function() {
    alert('The option with value ' + $(this).val());
});

または、jQueryを使用している場合は1.7+：

$("#yearDropdown").on('change', function() {
    alert('The option with value ' + $(this).val());
});

それにもかかわらず、ブラウザがマークアップのレンダリングを終了したら、通常はスクリプトを実行するのが最善です。

32
xandercoded

私はあなたのコードを試しました jsFiffleで 。オプションとして手動で数年追加しました。それは正しく動作します。

$（document）.readyの.changeイベントをバインドするだけです。

$(document).ready(function(){
  $("#yearDropdown").change(function () {
      alert('The option with value ' + $(this).val());
  });​
});
1
Alberto De Caro

あなたのコードは正しく、私にとってはうまくいきます。ここを参照してください： http://jsfiddle.net/mobweb/2Skp9/

JQueryが正しくロードされていますか？

0
Louis B.

これが役立つかどうかはわかりませんが、これを試すことができます：

    $("#yearDropdown").live("change", function () {
    alert('The option with value ' + $(this).val());
});
0
Logard