选择没有下拉选项的标签答案

【问题标题】：Select tag with no drop down options选择没有下拉选项的标签
【发布时间】：2018-08-28 10:57:52
【问题描述】：

我正在尝试创建一个没有下拉选项的select 标签

我需要将外观作为第一个输出（无下拉菜单）但只有一个选项，这样我就可以切换选项而无需拉出下拉列表。

我尝试为选择标签设置高度，但它不起作用。

我的问题不在于隐藏第一个元素，我不想为需要切换选项的选项拉下拉列表。

/*.scrollable{height:25px;}*/

.scrollable{margin-right:25px;}

<select size="2" class="scrollable">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select size="1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

这是否可能仅通过使用 html 和 css（以及任何脚本，如果可能的话）？

【问题讨论】：

数值是数字吗？
是的@Dementic，但仅限于现在。
有时可以是字符串
HTML select: how to set default text which won't be shown in drop-down list?的可能重复
您能否扩展您的描述，我不太清楚您的预期功能是什么。

标签： javascript jquery html css

【解决方案1】：

- 仅 HTML（半）解决方案

假设您想像在示例中那样使用数字，您还可以使用数字类型的输入字段。

我添加了一些 CSS 以始终在 Chrome 中显示箭头。在其他浏览器中，箭头始终显示。

请注意，这只适用于数字，不适用于字符串或其他类型。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

&lt;input value="1" min="1" max="9" type="number" style="width:30px"/&gt;

- Javascript 解决方案

此解决方案涉及一些简单的 Javascript，但也适用于字符串。您可以随意设置<div> 标签的样式，使其类似于向上和向下按钮，这取决于您。

var options = [ "Orange",  "Kiwi", "Banana", "Strawberry", "Pear" ]

// The current index of the options array
var current = 0;

// This function removes 1 from the currently selected option index and sets the field value
function prev(){
  if(current > 0) current--;
  setFieldValue(options[current]);
}

// This function adds 1 to the currently selected option index and sets the field value
function next(){
  if(current < options.length-1) current++;
  setFieldValue(options[current]);
}

function setFieldValue(text){
  document.getElementById("field").value = options[current];
}

// Call the method so the field doesn't start out empty
setFieldValue(options[current]);

div.button {
  display: block;
  position: absolute;
  width: 20px;
  height: 10px;
  text-align: center;
  background-color: gray;
  color: white;
  line-height: 10px;
  cursor: pointer;
}

div.button:hover {
  background-color: lightgray;
}

div.one {
  right: 0;
  top: 0;
}
div.two {
  right: 0;
  bottom:0;
}

div.field-wrapper {
  display: inline-block;
  position: relative;
}


input#field {
  background-color: white;
}

<div class="field-wrapper">
  <input id="field" disabled/>
  <div class="button one" onclick="prev();">^</div>
  <div class="button two" onclick="next();">v</div>
</div>

【讨论】：

就是这样！谢谢。
这仅适用于数字，这就是为什么我问您该列表是否仅是您回答“是@Dementic，但仅适用于现在”的数字。
是的，我说的是@Dementic，但我期待的答案至少是数字。
添加了一个 Javascript 解决方案，用于当您想使用字符串而不是数字时。
@Viira 我添加了一些 CSS 以使用包装 div 将按钮包含在框中。

【解决方案2】：

此代码为您提供：

<select>
<option disabled selected value> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

-- select an option -- 默认显示。但是，如果您选择了一个选项，您将无法重新选择它。

你也可以通过添加一个空选项来隐藏它

所以它不会再出现在列表中了。

【讨论】：