web-dev-qa-db-ja.com

選択したオプションの変更時にhtml要素を表示および非表示

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>
javascriptjqueryhtmljsp
8
user3673449

関数の最後に間違いがあります-最後を削除します）;

最後に：

<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";
    }
}
9
alvery

次のように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>
4
Yaman

  1. JQueryを使用します。

  2. からonchange="change()"関数を削除します

    <select id="show" class="form-control" name="show_text_area" onchange="change()">

  3. 選択要素で変更イベントを探します。

    $('#show').on('change', function () {
   var optionSelected = $("option:selected", this);
   var valueSelected = this.value;
   if(valueSelected == 1){
       $("#text_area").show();
   } else {
       $("#text_area").hide();
   }
});

フィドル

2
anurag

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");
  }
1
Mitul Maheshwari

このコードを試してください：

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

通常のjavascriptオブジェクトを返すdocument.getElementByIdによってhtml要素を取得しています。 Jqueryメソッドhide（）およびshow（）は、jqueryオブジェクトでのみ使用できます。

しかし、あなたが達成したいものは何でも、単純なJavascriptによって達成できます。

show（）とhide（）の代わりに、それぞれtextarea.style.display = "block"とtextarea.style.display = "none";を使用します

コードの最後にある);を削除します。

作業例にはフィドルリンクを使用します。 フィドルリンク

0
Rawat Raman

jQueryでこれを行うことができます..... "$（document）.ready（function（）{

var seletVal=$('#show option:selected').val();
if(selectVal=='1')
$('#textareaId').show();
else
$('#textareaId').hide();
});

」

0
swapnil patil

次のようにjQueryを使用することもできます。

$("#show").change(function(){
   if($(this).val()=="1")
   {    
       $("#text_area").show();
   }
   else
   {
       $("#text_area").hide();
   }
});

デモ

0
Sadikhasan

関数は正しいですが、js Elementクラスにはshow（）およびhide（）メソッドがありません。プロトタイプを使用して実装できます。例として

Element.prototype.hide(){
this.style.display = "hidden";
} 
Element.prototype.show(style){
style = style ? style : "block";
this.style.display = style;
}

ただし、jqueryまたはこのようなものを使用する方が適切です。

0
degr
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");
 }
0
A Beginner