时间戳

首页 > 解决方案 > 无法使用选择隐藏和显示字段

javascript - 无法使用选择隐藏和显示字段

问题描述

我正在尝试显示和隐藏标签中具有相应选定值的字段。但它不起作用。相同的代码在我的其他站点中运行良好。但它在这里不起作用，不知道我错过了什么。这是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12 col-lg-12">
  <label>Product Type <sup>*</sup></label>
  <div class="select-wrp">
    <script>
      $('select')
        .change(function () {
          if ($(this).val() === 'single') {
            $('.single').show();
            $('.multiple').hide();
          } else {
            $('.multiple').show();
            $('.single').hide();
          }
        })
        .change();
    </script>

    <select name="product_type">
      <option value="single">Single</option>
      <option value="multiple">Multiple</option>
    </select>
  </div>
</div>

<div class="col-md-12 col-sm-12 col-lg-12">
  <input class="single" name="single" type="text" placeholder="100" />
  <input class="multiple" name="multiple" type="text" placeholder="100" />
</div>

标签： javascriptjquery

解决方案

您的脚本需要被告知等待窗口首先被加载。您可以使用 jQuery 来执行此操作，只需$(() => { ... })在现有脚本周围添加：

  $(() => {
    $('select').change(function () {
      if ($(this).val() === "single") {
        $('.single').show();
        $('.multiple').hide();
      } else {
        $('.multiple').show();
        $('.single').hide();
      }
    }).change();
  });

在本机，您会使用它window.onload = () => { ... };。

推荐阅读