根据下拉值激活复选框

Question

我正在 Javascript 中寻找一种解决方案，它可以根据特定的下拉值（在标准 HTML 中启用（选中）表单上的复选框由 SQL 生成）在同一表格的其他地方被选中。我还没有写任何代码，所以现在没有任何代码可以在这里展示。编辑于 04/08/20：基于 Giuliano 提供的出色帮助，我决定添加我放在一起的代码（不起作用），如下所示：

<%
sSQL = "SELECT OrderTypeID, OrderTypeString FROM LookupOrderTypesII"
Set rsOrderTypes = Server.CreateObject("ADODB.RecordSet")
rsOrderTypes.Open sSQL, oConnGlobal, adOpenStatic, adLockReadOnly 
iTotalRecords = rsOrderTypes.Recordcount

If iTotalRecords > 0 Then
%>

<br>
<b>SERVICE/ORDER TYPE:</b>
<br>

<script type="text/javascript">
    let select = document.getElementById("cboOrderType");
    let checkbox = document.getElementById("chkSkipVenueEventDetails");

        select.addEventListener("change", function () {
        checkbox.checked = select.value == "12|LABOR SALES/PAYMENT";
        });
</script>

<select class="rounded" name="cboOrderType" id="cboOrderType">
    <option value="Select One" selected>Select One</option>
    <option value="-9999" <%=IfSelected(iOrderTypeID, "Not Listed-ADD Custom Type")%>>Not Listed-ADD Custom Type</option>
    <%
        Do While Not rsOrderTypes.EOF 

            iOrderTypeID = Trim(rsOrderTypes("OrderTypeID"))
            sOrderTypeString = Trim(rsOrderTypes("OrderTypeString"))
    %>
        <option value="<%=iOrderTypeID%>|<%=sOrderTypeString%>"<%=IfSelected(sOrderTypeString, sOrderTypeString_NewRequest)%>><%=sOrderTypeString%></option>
    <%
        rsOrderTypes.MoveNext
        Loop
    %>
</select>
<% 
    rsOrderTypes.Close
    Set rsOrderTypes = Nothing

End If
%>
'''

The SQL code generates the following code (as viewed in browser source):

'''
<select class="rounded" name="cboOrderType" id="cboOrderType">
    <option value="Select One" selected>Select One</option>
    <option value="-9999" >Not Listed-ADD Custom Type</option>
    <option value="1|WILL CALL">WILL CALL</option>
    <option value="2|DELIVERY ONLY-CUSTOMER RETURN">DELIVERY ONLY-CUSTOMER RETURN</option>
    <option value="3|DELIVERY and PICKUP ONLY (Dry Hire)">DELIVERY and PICKUP ONLY (Dry Hire)</option>
    <option value="4|DELIVERY with SETUP and STRIKE">DELIVERY with SETUP and STRIKE</option>
    <option value="5|DELIVERY with SETUP ONLY-CUSTOMER STRIKES">DELIVERY with SETUP ONLY-CUSTOMER STRIKES</option>
    <option value="6|SHIPPED-CUSTOMER RETURN">SHIPPED-CUSTOMER RETURN</option>
    <option value="7|SUPERVISION ONLY">SUPERVISION ONLY</option>
    <option value="8|CONSULTATION SERVICES">CONSULTATION SERVICES</option>
    <option value="9|EQUIPMENT SALES-WILL CALL">EQUIPMENT SALES-WILL CALL</option>
    <option value="10|EQUIPMENT SALES-SHIPPED">EQUIPMENT SALES-SHIPPED</option>
    <option value="11|COMMISSION SALES">COMMISSION SALES</option>
    <option value="99|TEST ORDER">TEST ORDER</option>
    <option value="12|LABOR SALES/PAYMENT">LABOR SALES/PAYMENT</option>
</select>

这里是复选框 HTML:

<input type="checkbox" name="chkSkipVenueEventDetails" id="chkSkipVenueEventDetails">&nbsp;<strong>Skip Venue & Event Details</strong>&nbsp;&nbsp;

Answer 1

您可以简单地向 select 的 "change" 事件添加事件侦听器，然后根据 selected 的值更改属性 "checked"复选框

html:

<html>
 <head></head>
 <body>
  <select id="select">
   <option value="a" selected>something</option>
   <option value="b">check</option>
  </select>
  <label>
   <input id="checkbox" type="checkbox">
   Checkbox
  </label>
  <script>
   let select = document.getElementById("select");
   let checkbox = document.getElementById("checkbox");
   select.addEventListener("change", function () {
     checkbox.checked = select.value !== "a";
   });
  </script>
 </body>
</html>

Try it

根据下拉值激活复选框

Activate Checkbox Based upon Drop Down Value

html

javascript

asp-classic