时间戳

首页 > 解决方案 > 如何添加带有多个占位符的向下滑动搜索框？

html - 如何添加带有多个占位符的向下滑动搜索框？

问题描述

我正在研究搜索框和select元素的混合体。我遇到的问题是，每次我从向下滑动栏中选择一个选项时，我都会在搜索框中看到一个文本。我希望文本成为框内的占位符，而不是普通文本。我不确定该怎么做，所以任何帮助将不胜感激！

测试.html：

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option value="ID">Select ID</option>
    <option value="Name">Select Name</option>
    <option value="Surname">Select Surname</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

标签： htmlcss

解决方案

您可以像设置值一样设置占位符：

document.getElementById("displayValue").placeholder = 'New placeholder'

推荐阅读