Question

我有以下代码：

<form name="input" action="<?php echo URL; ?>jc/write_upaction" method="post" id="derp">
    <label><span style='font-weight: bold;'>Name(s):<input style='width:30%;' type="text" placeholder="Name, Name" name="name" required></span>
    </label>
    <label><span style='font-weight: bold;'>Date:<input style='width:30%;' type="date" placeholder="MM/DD/YYYY" name="date" required></span>
    </label>
    <label for="date"><span style='font-weight: bold;'>Time:<input style='width:30%;' type="time" placeholder="HH:MM" name="time" required></span>
    </label>
    <label for="time"><span style='font-weight: bold;'>Witnesses:<input style='width:30%;' type="text" placeholder="Name, Name" name="witnesses"></span>
    </label>
    <label><span style='font-weight: bold;'>Reason:</span>
    </label>
    <select name="reason" style="width:30%;">
        <option value="placeholder">Didn't clean up mess</option>
        <option value="Other">Other, Specify below</option>
    </select>
    </label>
    <textarea form="input" id="txtarea" placeholder="Write your reason here..." name="reason_other" cols="28" rows="5"></textarea>
    <div style="text-align:right;"><span style="font-weight:bold;" id="counter"></span>
    </div>
    <input type="submit" value="Submit">
</form>

我希望这个选项有价值＆＃34;其他＆＃34;也让textarea名称＆＃39; d＆＃34; reason_other＆＃34;如果选择了“其他”选项，则会出现反正有吗？

Answer 1

有了这个：

$(function(){
  $("select[name=reason]").change(function(){
      if($(this).val() == 'Other')
          $('#txtarea').show();
      else
          $('#txtarea').hide();
  });
});

干杯

Answer 2

与jquery是：

$(document).ready(function(){

$("select").change(function(){
val = $(this).val();
if(val == "Other")
{
$("#txtarea").show();
}
});

});

在你的css中添加这个

#txtarea {display:none;}

Answer 3

http://jsfiddle.net/fenderistic/6ejps/

只需给你的select元素一个id的内容，在这种情况下，我将它设置为slct。

$("#txtarea").hide();

$( "#slct" ).change(function() {
   var val = $("#slct").val();
if(val=="Other"){
    $("#txtarea").show();
} else {
    $("#txtarea").hide();
}
});

Answer 4

使用Jquery更改选项可以正常工作：

http://api.jquery.com/change/

Answer 5

根据所选值切换可见性

$('[name="reason"]').on('change', function() {
     $('#txtarea').toggle(this.value == 'Other');
}).trigger('change');

FIDDLE

没有jQuery

var select   = document.getElementsByName('reason')[0],
    textarea = document.getElementById('txtarea');

if (select.addEventListener) {
     select.addEventListener('change', handler, false);
} else if (select.attachEvent) {
     select.attachEvent('onchange', handler);
}

function handler() {
    textarea.style.display = this.value == 'Other' ? 'inline' : 'none';
}

FIDDLE

Answer 6

这是一个没有任何jQuery的解决方案：

试试这个，在你的：

添加一个“onchange”

<select name="reason" style="width:30%;" onchange="reasonChanged(this);">

只要更改了select的值，就会调用函数reasonChanged（....），并且“this”将引用传递给调用该函数的DOM节点。

将函数定义为：

function reasonChanged(select_obj) {
  var textArea = document.querySelector("#txtarea");
  if (select_obj.value == "Other") {
    textArea.style.display = "block";
  } else {
    textArea.style.display = "none";
  }
}

我没有对此进行过测试，因此您必须自行测试并自行调试。

Answer 7

**Here is solution please try it.......**

<script>
function showhide(){ alert(document.getElementById('reason').value);
if(document.getElementById('reason').value == 'Other'){
document.getElementById('txtarea').style.display = 'block';
}
else{
document.getElementById('txtarea').style.display = 'none';
}
}
</script>
<form>
<label><span style='font-weight: bold;'>Reason:</span>
    </label>
    <select id="reason" name="reason" style="width:30%;" onchange="javascript: showhide();">
        <option value="placeholder">Didn't clean up mess</option>
        <option value="Other">Other, Specify below</option>
    </select>
    </label>
    <textarea  style="display:none;" form="input" id="txtarea" placeholder="Write your reason here..." name="reason_other" cols="28" rows="5"></textarea>
 </form>

如果选择了选项，则显示textarea

7 个答案: