如何在另一个选择列表的更改功能上更改选择列表的值？ [复制]

Posted 2023-03-05

【中文标题】如何在另一个选择列表的更改功能上更改选择列表的值？ [复制]

【英文标题】：How do I change the value of a select list on change function of another select list? [duplicate]

【发布时间】：2019-08-12 02:22:06

【问题描述】：

我有这个select，它绑定了一个更改事件。在其中的值的change 上，我想在另一个选择列表中选择一个特定元素，即其中的一个特定选项。

但是它不起作用。主服务中有一些服务不需要选择子服务，因此应选择默认的-select-。

$("#MainServices").change(function() 
  $(#SubServices).val("-Select-")

<select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
  <option selected value="m-None">-Select-</option>
  <option value="m-SS">Software Services</option>
  <option value="m-AIMS">Asset Integrity Management Services</option>
  <option value="m-HSE">HSE & Environmental Services</option>
  <option value="m-ES">Engineering Services</option>
</select>

<select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">
  <option class="" selected value="s-None">-Select-</option>
  <option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
  <option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
  <option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
  <option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>
</select>

【问题讨论】：

您的 JS 中存在一些语法问题；缺少引号和结束 )。另请注意，您设置了选项的 value，而不是 text，因此 val("-Select-") 需要为 val("s-None")

F12 在调试 JS 时帮助很多。您应该（必须？）使用它。

【参考方案1】：

-Select-是那个选项的文本，值是s-None，所以应该是

$("#MainServices").change(function() 
  $("#SubServices").val("s-None")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
  <option selected value="m-None">-Select-</option>
  <option value="m-SS">Software Services</option>
  <option value="m-AIMS">Asset Integrity Management Services</option>
  <option value="m-HSE">HSE & Environmental Services</option>
  <option value="m-ES">Engineering Services</option>
</select>

<select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">

  <option class="" selected value="s-None">-Select-</option>
  <option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
  <option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
  <option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
  <option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>
</select>

【讨论】：

我不确定。取决于数据是什么。我会使用 jquery 并将值动态加载到第二个下拉列表中。

这很常见，这里有很多关于级联选择的问题，您可以在其中看到如何做到这一点。