javascript - 根据其他选择值隐藏和显示选择选项

Question

我有这个表单，其中包含一些选择下拉菜单，并根据我们选择的内容显示和隐藏其他下拉菜单。当我选择值 All 时，geo 选择会对所选值使用react，但当我选择值 Test 时，函数系列 选择不会消失。有什么原因吗？

当选择测试时，我还需要将函数族的值分配给0。如有帮助，将不胜感激。

主要选择:

<select name="scope" onchange="javascript:sync_scope()">
                            <option value="1">All </option>
                            <option value="10">Test</option>
                        </select>

Javascript:

 function sync_scope() {
      var scope = document.form.scope.value;
      document.form.geo.style.display = ( scope == "1" ) ? "block" : "none";     
      document.form.function_family.style.display = ( scope == "10" ) ? "none" : "block";

    }

HTML

 <select name="geo">
    <?php foreach ($geos as $geo) : ?>
        <option value="<?php echo $geo['id']; ?>"><?php echo utf8_encode($geo['name']); ?></option>
    <?php endforeach; ?>
</select>

<select name="function_family" id ="function_family">
<option value="0" <?php selected($function_family, 0); ?>>All functions</option>
<?php foreach ($functions as $function) : ?>
    <option value="<?php echo $function['id']; ?>"><?php echo utf8_encode($function['name']); ?></option>
<?php endforeach; ?>
</select>

Answer 1

第二个选项中的 if 条件错误:

 function sync_scope() {
      var scope = document.form.scope.value;
      document.form.geo.style.display = ( scope == "1" ) ? "block" : "none";     
      document.form.function_family.style.display = ( scope == "10" ) ? "none" : "block";

    }

应该是:

 function sync_scope() {
      var scope = document.form.scope.value;
      document.form.geo.style.display = ( scope == "1" ) ? "block" : "none";     
      document.form.function_family.style.display = ( scope == "10" ) ? "block" : "none";

    }

要应用逻辑来选择特定值，只需执行以下操作:

document.form.function_family.value = 0;

当范围等于 10 时。要添加此内容，您最好显式编写 if 而不是使用三元运算符:这样您可以检查一次范围的值，并同时应用您想要的所有逻辑