时间戳

首页 > 解决方案 > 当数据列表中引入的字符串不在数据列表中时，有什么方法可以显示输入？

html - 当数据列表中引入的字符串不在数据列表中时，有什么方法可以显示输入？

问题描述

我从未使用过数据列表，我只想在写入的值不在数据列表中时才显示文件类型输入。这是我的代码：

<input list="customer" name="customer">
  <datalist id="customer">
    <option value="Customer 1">
    <option value="Customer 2">
    <option value="Customer 3">
  </datalist>
<input type="file">

所以，我想要的是，如果你引入一个不在选项中的值，我想显示输入类型文件。有没有办法用 CSS 做到这一点？

编辑：我更改了代码，因为我要显示的选项位于 php 数组中。所以这是我现在的代码：

<datalist id="customer">
  <?php
   foreach ($_SESSION[CUSTOMER_NAMES] as $row) {
     ?>
  <option value="<?php echo $row[0] ?>">
    <?php } ?>
    </datalist>
    <div class="inputBox">
       <input type="text" name="customer" id="customer" required="" list="customer"
       <?php 
         if (isset($_SESSION[CUSTOMER])) { 
           ?> 
           value="<?php echo $_SESSION[CUSTOMER]; ?>" 
       <?php } ?>>
       <label for="customer">Customer</label>                    
     </div>

标签： htmlcssinputhtml-datalist

解决方案

因为只有在 CSS 中这是不可能的，所以我会使用 javascript 并创建一个选项值数组；在input事件中，我会检查该值是否存在于数组中。

如果检索到一个值，则.found在列表输入中切换一个类，然后可以使用同级选择器隐藏文件输入

var dl = [...document.querySelectorAll('option')].map(
            (opt) => opt.value);

var cs = document.querySelector('[name="customer"]');

cs.addEventListener('input', function() {
   this.classList.toggle('found', dl.includes(this.value))   
});
[type="file"] { display: inline-block; }
.found ~ [type="file"] { display: none; }
<input list="customer" name="customer">
  <datalist id="customer">
    <option value="Customer 1">
    <option value="Customer 2">
    <option value="Customer 3">
  </datalist>
  
<input type="file">

推荐阅读