代码之家 › 专栏 › 技术社区 › Viira

选择不带下拉选项的标记

css html jquery javascript

-1

Viira · 技术社区 · 7 年前

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>

2 回复 | 直到 7 年前

Rick 7 年前

-纯HTML(半)解决方案

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

我包含了一些CSS来显示Chrome中的箭头。在其他浏览器中,箭头始终显示。

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

<input value="1" min="1" max="9" type="number" style="width:30px"/>

这个解决方案涉及到一些简单的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>

Mojtaba Nava 7 年前

这是给你的代码:

<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 --默认情况下将显示。但如果你选择了一个选项,你将无法选择它回来。

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

所以它不会再出现在名单上了。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前