JSPページには、ドロップダウンリストがあります。リストの最初の要素が選択されている場合、クリックするとすぐにテキスト領域が表示されます。私はJavascript/Jqueryが初めてなので、関数に何かが欠けているのは明らかです(テキスト領域は表示されません)。誰かが助けてくれることを願っています。
これはHTMLです。
<tr class="odd gradeX">
<td class="col-lg-3">
<div>
<label>Show text area</label>
<select id="show" class="form-control" name="show_text_area" onchange="change()">
<option value="1">YES</option>
<option value="0">NO</option>
</select>
</div>
</td>
<td class="col-lg-3">
<div>
<label>Text area</label>
<textarea id="text_area" class="form-control" type="text" name="text_area" placeholder="Write something" rows="5" cols="50" style="display: none"></textarea>
</div>
</td>
</tr>
これは、JSPの上の関数です。
<script> function change() {
var selectBox = document.getElementById("show");
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.show();
}
else{
textarea.hide();
}
});</script>
関数の最後に間違いがあります-最後を削除します);
最後に:
<select id="show" class="form-control" name="show_text_area" onchange="change(this)">
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.style.display = "block";
}
else{
textarea.style.display = "none";
}
}
次のようにjQueryを使用できます
<script> function change() {
var selectBox = document.getElementById("show");
var selected = selectBox.options[selectBox.selectedIndex].value;
if(selected === '1'){
$('#text_area').show();
}
else{
$('#text_area').hide();
}
}</script>
JQueryを使用します。
からonchange="change()"
関数を削除します
<select id="show" class="form-control" name="show_text_area" onchange="change()">
選択要素で変更イベントを探します。
$('#show').on('change', function () {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected == 1){
$("#text_area").show();
} else {
$("#text_area").hide();
}
});
jqueryも使用できます。
$('#show').val();
if( $('#show').val() == "1")
{
$('#text_area').show();
OR
$("#text_area").css("visibility", "visible");
}else
{
$('#text_area').hide();
OR
$("#text_area").css("visibility", "hidden");
}
このコードを試してください:
// This will create an event listener for the change action on the element with ID 'show'
$('#show').change(function() {
// If checkbox is 'checked'
if($(this).is(':checked')) {
// show the element that has the id 'txt_area'
$('#text_area').show();
} else {
// hide it when not checked
$('#text_area').hide();
}
});
通常のjavascriptオブジェクトを返すdocument.getElementByIdによってhtml要素を取得しています。 Jqueryメソッドhide()およびshow()は、jqueryオブジェクトでのみ使用できます。
しかし、あなたが達成したいものは何でも、単純なJavascriptによって達成できます。
show()とhide()の代わりに、それぞれtextarea.style.display = "block"
とtextarea.style.display = "none"
;を使用します
コードの最後にある);
を削除します。
作業例にはフィドルリンクを使用します。 フィドルリンク
jQueryでこれを行うことができます..... "$(document).ready(function(){
var seletVal=$('#show option:selected').val();
if(selectVal=='1')
$('#textareaId').show();
else
$('#textareaId').hide();
});
」
次のようにjQueryを使用することもできます。
$("#show").change(function(){
if($(this).val()=="1")
{
$("#text_area").show();
}
else
{
$("#text_area").hide();
}
});
関数は正しいですが、js Elementクラスにはshow()およびhide()メソッドがありません。プロトタイプを使用して実装できます。例として
Element.prototype.hide(){
this.style.display = "hidden";
}
Element.prototype.show(style){
style = style ? style : "block";
this.style.display = style;
}
ただし、jqueryまたはこのようなものを使用する方が適切です。
var drpVal= $('#show').val();
if( drpVal == "1")
{
$('#text_area').show();
// or u can use
$("#text_area").css("display", "");
}
else{
$('#text_area').hide();
// or u can use
$("#text_area").css("display", "none");
}