css - 如何在使用 onchange 选择选项后隐藏/显示表单元素

Question

我想根据选择的组合框隐藏和显示几个表单元素。我正在使用跨度和 onchange。这是我的代码。为什么它不起作用？

<div class="form-group row">
<label class="col-sm-3 control-label text-right">Clrtext</label>
<div class="col-sm-3">
<select id= "cla" name="clr" class="form-control" onchange=
"if (this.selectedIndex==1)
{ document.getElementById('ppus').style.display = 'inline' }
elseif(this.selectedIndex==2) { document.getElementById('ppud').style.display = 'inline' };">
     <option selected> --- Pilih --- </option>
      <option value="11">clr1</option>
      <option value="12">Clr2</option>
      <option value="13">Clr3</option>
</select>
</div>
</div>



<span id="ppus"  style="display:none;">


<p class="alert alert-info">
  <i class="fa fa-user"></i> PPUS List 
</p>

<!--1 -->
<div class="form-group row">
<label class="col-sm-3 control-label text-right">set 1</label>
<div class="col-sm-4">
<input type="text"  name="sett1" class="form-control" style="width:350px;" placeholder="sett">
</div>
</div>
<!--2-->
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Set2</label>
<div class="col-sm-4">
<input type="text"  name="sett2" class="form-control" style="width:350px;" placeholder="setting">
</div>
</div>


</span>







<span id="ppud"  style="display:none;">

----
</span>

我试图搜索所有相关问题但失败了。我正在使用 php laravel。感谢你。

标签： csshtml-tablecomboboxhideshow-hide