在選定的選項更改上顯示和隱藏html元素

Question

在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>

Answer 1

你的功能結束時有錯誤 - 刪除最后一個）;

最后它應該是：

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

Answer 2

你可以使用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>

Answer 3

1. 使用jQuery。

2. 從中刪除onchange="change()"函數

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

3. 在select元素上查找change事件。

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

小提琴

Answer 4

你也可以使用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");
  }

Answer 5

試試這段代碼：

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

Answer 6

您也可以使用jQuery，如下所示。

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

演示

Answer 7

你的函數是正確的，但是js Element類沒有show（）和hide（）方法。 您可以使用原型實現它。 舉個例子

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

但最好使用jquery或類似的東西。

Answer 8

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

Answer 9

你可以在jQuery中做到這一點.....比如“$（document）.ready（function（）{

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

“

Answer 10

您將通過document.getElementById獲取html元素，該元素返回正常的javascript對象。 Jquery方法hide（）和show（）僅適用於jquery對象。

但無論你想要實現什么，都可以通過簡單的Javascript實現，只需做一些簡單的改動。

而不是show（）和hide（）分別使用textarea.style.display = "block"和textarea.style.display = "none" ;

並刪除); 在你的代碼的最后。

使用小提琴鏈接作為工作示例。 小提琴鏈接