Активировать флажок на основе выпадающего значения - PullRequest
Новая
       9

Активировать флажок на основе выпадающего значения

0 голосов
/ 01 апреля 2020

Я ищу решение в Javascript, которое включило бы (поместите в него флажок) флажок в форме на основе указанного c раскрывающегося значения (в стандартном HTML, сгенерированного SQL) выбирается в другом месте в той же форме. Я еще не написал ни одного кода, так что сейчас мне нечего показывать. РЕДАКТИРОВАТЬ 08/08/20: Основываясь на прекрасной помощи, полученной от Джулиано, я решил добавить код, который я собрал (который не работает), следующим образом: 

<%
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;

1 Ответ

1 голос
/ 01 апреля 2020

Вы можете просто добавить прослушиватель событий к событию «change» выбора, а в зависимости от выбранного значения вы можете изменить атрибут «флажок» флажка

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>

Попробуйте

...