在依赖于另一个字段选择的窗体中隐藏表的某个部分

Hiding a section of a table in a form dependent on another field choice

本文关键字：隐藏 个部 窗体 依赖于 另一个 字段 选择      更新时间：2023-09-26

我只想在所选选项包含"split"一词时在表单中显示特定行

我已经在行上使用了一个类来隐藏，并且已经走到了这一步，但无法让它工作

    
$(document).ready(function() {
    $(".split td").hide();
    
    $('#os0').change(function() {
        var val = $(this).val();
        if (val == "*split*") {
            $('.split td').show();
        } else {
            $('.split td').hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
    <td>
        <input type="hidden" name="product[]" value="Type" /> Type:
        <select name="product[]" id="os0">
            <option value="Anodised closed">Anodised closed </option>
            <option value="Plain closed">Plain closed</option>
            <option value="Black filled closed">Plain closed Black filled </option>
            <option value="Anodised split">Anodised split</option>
            <option value="Plain split">Plain split</option>
            <option value="Black filled split">Plain split Black filled </option>        
        </select>
    </td>
</tr>       
<tr>
    <td class="split">
        <input type="hidden" name="product[]" value="yrno" />Please specify year if required:
        <input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
    </td>
</tr>

谁能告诉我哪里出了问题，请:)

你选择$(".split td")必须像$("td.split")

并搜索是否存在substring使用indexOf()，它返回主字符串中子字符串的第一index。

$(document).ready(function() {
  $('td.split').hide();
  $('#os0').change(function() {
    var val = $(this).val();
    if (val.indexOf("split") > -1) {
      $('td.split').show();
    } else {
      $('td.split').hide();
    }
  });
});
td.split {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="hidden" name="product[]" value="Type" />Type:
      <select name="product[]" id="os0">
        <option value="Anodised closed">Anodised closed</option>
        <option value="Plain closed">Plain closed</option>
        <option value="Black filled closed">Plain closed Black filled</option>
        <option value="Anodised split">Anodised split</option>
        <option value="Plain split">Plain split</option>
        <option value="Black filled split">Plain split Black filled</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="split">
      <input type="hidden" name="product[]" value="yrno" />Please specify year if required:
      <input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
    </td>
  </tr>
</table>

相关文章：