Question

所以我试图创建一个交互式表单，其中一个下拉列表的值会影响另一个下拉列表的内容。我在SO上看到了一些类似的问题，我决定从所有答案中获得最佳效果。无论如何，我在最后一部分陷入困境，似乎无法弄清楚它为什么不起作用。

表格：

<div class="form-group">
    <label class="col-lg-2 control-label">Dienst</label>
    <div class="col-lg-2">
      <select id="dienst" name="dienst" class="form-control">
        <option value"" disable selected>&nbsp;</option>
        <option value="Psychiatrie">Psychiatrie</option>
        <option value="Oncologie">Oncologie</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Ziekte</label>
    <div class="col-lg-2">
      <select name="ziekte" class="form-control">
        <option value"" disable selected>&nbsp;</option>
        <option class="Psychiatrie_select" value"" >Jong Dementie</option>
        <option class="Psychiatrie_select" value"" >Neuropsychiatrische stoornissen</option>
        <option class="Oncologie_select" value"" >Other</option>

      </select>
    </div>
  </div>

JS代码

$('select#dienst').on('change', function() {
event.preventDefault();
var dienst = $('[name="dienst"]').val();

if(dienst == "Psychiatrie"){
  document.getElementsByClassName(Psychiatrie_select).style.display = 'block';
}
});

背后的逻辑：

我首先得到第一个下拉列表（id = dienst）的值，并根据我想要更改第二个下拉选项的显示值（其中class是Psychiatrie_select）

我还通过console.log（dienst）进行了调试，并显示第一个下拉菜单的选择存储在dienst中。可能有什么问题，因为我的css显示属性似乎没有改变。

通过下拉选择更改显示属性

0 个答案: