Question

我想实现一个函数，默认情况下隐藏输入类型文本，当我从下拉视图中选择一个选项（比如说其他）时，我想取消隐藏/显示输入类型它下面的文字元素。

<select name='property_types' id='property_types' class='postform'>
<option class="level-0" value="Digital screen">Digital Screen</option>
<option class="level-0" value="Lamp poster">Lamp poster</option>
<option class="level-0" value="Bus stand">Bus Stand</option>
<option class="level-0" value="Indoor shopping mall">Indoor shopping mall</option>
<option class="level-0" value="Green belts">Green belts</option>
<option class="level-0" value="showUnhide">others..</option>
</select>

这里是输入类型文本的代码，我无法在堆栈上显示overflow.say它的id是＆＃34; textareaTobeShown＆＃34;。我该如何实施呢。

Answer 1

希望这会有所帮助！

<select name='property_types' id='property_types' class='postform' onchange="zz()">


        <option class="level-0" value="Digital screen">Digital Screen</option>

        <option class="level-0" value="Lamp poster">Lamp poster</option>

        <option class="level-0" value="Bus stand">Bus Stand</option>

        <option class="level-0" value="Indoor shopping mall">Indoor shopping  
mall</option>

        <option class="level-0" value="Green belts">Green belts</option>

        <option class="level-0" value="showUnhide">others..</option>

    </select>

    <input type="text" id="textareaTobeShown" style="display:none">


<script>
function zz()
{
var aa=document.getElementById("property_types");
if(aa.value=="showUnhide")
{
document.getElementById('textareaTobeShown').style.display= '';
}
else
{
document.getElementById('textareaTobeShown').style.display= 'none';

}

}
</script>

Answer 2

假设您要在选择input text选项时显示Green belts。请参阅以下代码

  $('#txt').hide(); /*hiding Text Box Initialy*/
  $('#property_types').on('change', function () {
     var value = $(this).val()
     if (value == "Green belts") {
         $('#txt').show();
     } else {
         $('#txt').hide();
     }
 });

请参考以下小提琴获取工作代码：fiddle

Answer 3

你的jquery（让你的文本框ID是 textareaTobeShown ）

$('#property_types').on('change',function(){
    var index=$('option:selected',$(this)).index();
    if(index==5){
        $('#textareaTobeShown').show();
    }

    else{
        $('#textareaTobeShown').hide();
    }
});

DEMO

Answer 4

简单的jQuery如下

<script type="text/javascript">
    $(function () {     
        $('#textareaTobeShown').hide();

        $('#property_types').change(function() {    
            if($(this).val() == "showUnhide"){
                $('#textareaTobeShown').show();
            }
        });
    }); 
</script>

当选择下拉选项时，将显示输入类型文本

4 个答案: