何が欠けているのか一生分からない。
このjsFiddleでは、dom の準備が整った 2 つのテキスト ボックスを含む div を非表示にしています。ドロップダウンで特定のオプションが選択されたときに div を表示したい。
非表示/表示されているdivは次のとおりです。
<div id="movieAddNewDirector">
<label id="lblMovieAddDirector">Add a New Director:</label>
<br />
<label for="txtMovieAddNewDirectorFirstName">First Name:</label>
<input type="text" name="txtMovieAddNewDirectorFirstName" id="txtMovieAddNewDirectorFirstName" size="20" />
<br />
<label for="txtMovieAddNewDirectorLastName">Last Name:</label>
<input type="text" name="txtMovieAddNewDirectorLastName" id="txtMovieAddNewDirectorLastName" size="20" />
</div>
関連するjQueryコードは次のとおりです
$('#ddlMovieAddDirector').change(function () {
var id = $(this).find('option:selected').attr('id');
alert('id: ' + id);
if (id == '#optMovieAddDirectorNew') {
alert('attempting to show new director div');
$('#movieAddNewDirector').show();
} else {
alert('id didn\'t match - id: ' + id);
$('#movieAddNewDirector').hide();
}
});
2 番目のオプションを選択すると、検出された ID を表示する最初のアラートに div を表示する正しい ID が表示されますが、「ID が一致しませんでした」は常に表示されます。
jQuery に ID があることはわかっていますが、なぜこれが機能しないのかわかりません。divを表示/非表示にするラジオボタンの選択に非常によく似た機能があります。
どんな助けでも大歓迎です!