Javascript 是否可以显示所有<；选择>&书信电报；选项>；这是一个开关吗？

这是一个有点奇怪的请求，所以我还没有看到任何关于它的例子。基本上，我想“展开”一个

，这样它的选项就可以看到，基本上把它变成一个开关。这是我的原件

：

只有
及
或

使用选择框执行此操作相当。。。。。古怪的但肯定可以做到。这应该足以让您开始：

.toggle{
字号：18px；
高度：1.4em；
溢出：隐藏；
边框：1px纯黑；
边界半径：5px；
填充：0px；
框大小：边框框；
-webkit外观：无；
-moz外观：无；
外观：无；
}
.切换选项{
显示：内联块；
浮动：左；
宽度：50%；
最小宽度：50px；
身高：100%；
文本对齐：居中；
框大小：边框框；
}

及
或

使用选择框执行此操作相当。。。。。古怪的但肯定可以做到。这应该足以让您开始：

.toggle{
字号：18px；
高度：1.4em；
溢出：隐藏；
边框：1px纯黑；
边界半径：5px；
填充：0px；
框大小：边框框；
-webkit外观：无；
-moz外观：无；
外观：无；
}
.切换选项{
显示：内联块；
浮动：左；
宽度：50%；
最小宽度：50px；
身高：100%；
文本对齐：居中；
框大小：边框框；
}

及
或

如果可以在代码中添加一些额外的标记，还可以尝试以下代码：

请检查小提琴的演示

HTML

<select  id="select-box">
      <option value="AND" selected>AND</option>
      <option value="OR">OR</option>
</select>

<div class="toggle-effect">
   <label class="and">AND</label>
   <label class="or">OR</label>
</div>

JS

select {
  margin-bottom: 40px;
}

.and {
  border: 1px solid black;
  background:red;
  color: white;
}

.or {
  border: 1px solid black;
  background:blue;
  color: white;
}

$('.toggle-effect').on('click', '.and,.or', function(){
   var textInLabel = $(this).text();
   $('#select-box').val(textInLabel);
   $('#select-box').trigger('change');
});

---

如果可以在代码中添加一些额外的标记，则还可以尝试以下代码：

请检查小提琴的演示

HTML

<select  id="select-box">
      <option value="AND" selected>AND</option>
      <option value="OR">OR</option>
</select>

<div class="toggle-effect">
   <label class="and">AND</label>
   <label class="or">OR</label>
</div>

JS

select {
  margin-bottom: 40px;
}

.and {
  border: 1px solid black;
  background:red;
  color: white;
}

.or {
  border: 1px solid black;
  background:blue;
  color: white;
}

$('.toggle-effect').on('click', '.and,.or', function(){
   var textInLabel = $(this).text();
   $('#select-box').val(textInLabel);
   $('#select-box').trigger('change');
});

---

在CodePen进行了一些修补之后，我想出了这个主意，我添加了一些JS来添加滚动效果。

var select=document.getElementById（'select'）；
select.addEventListener（'mouseup'，函数（e）{
e、 预防默认值（）；
});
select.addEventListener（'mousewheel'，函数（e）{
select.selectedIndex=select.selectedIndex+1；
});
选择{
溢出：隐藏；
大小：2；
高度：18px；
}
选择权{
显示：内联；
}

1.
2.
在CodePen上做了一些修改后，我想出了这个办法，添加了一些JS来添加滚动效果。
var select=document.getElementById（'select'）；
select.addEventListener（'mouseup'，函数（e）{
e、 预防默认值（）；
});
select.addEventListener（'mousewheel'，函数（e）{
select.selectedIndex=select.selectedIndex+1；
});
选择{
溢出：隐藏；
大小：2；
高度：18px；
}
选择权{
显示：内联；
}

1.
2.
这是可以做到的，但使用复选框代替选择框。这是一个有效的问题，但我只是好奇。为什么要将其显示为切换？您也可以将它们作为单选按钮，而不是选择选项。@RajaSekar您的意思是
单选按钮
按钮。这是可以做到的，但使用复选框代替选择框。这是一个有效的问题，但我只是好奇。为什么要将其显示为切换？你也可以将它们作为单选按钮，而不是选择选项。@RajaSekar你是说单选按钮。
radio
按钮。嗯，这在演示中非常有效。但在我的页面中，我只得到了圆角，它保持为下拉列表。我在我的OP中添加了一些放置位置的上下文。您是否包括
size='2'
属性？啊哈，就是这样，完美：）补遗问题；当我点击这些选项时，它们是蓝色的，但当我点击时，蓝色的变成灰色；我希望颜色方案保持不变，无论它是否有焦点。样式
：选中的
选项因浏览器而异。虽然我完全同意这应该通过单选按钮来实现，但是你可以通过将选项的宽度更改为50%来解决firefox的问题。我还将框大小设置为边框框。我在上面的代码中做了一些其他调整，以提高跨浏览器的一致性。但在我的页面中，我只得到了圆角，它保持为下拉列表。我在我的OP中添加了一些放置位置的上下文。您是否包括
size='2'
属性？啊哈，就是这样，完美：）补遗问题；当我点击这些选项时，它们是蓝色的，但当我点击时，蓝色的变成灰色；我希望颜色方案保持不变，无论它是否有焦点。样式
：选中的
选项因浏览器而异。虽然我完全同意这应该通过单选按钮来实现，但是你可以通过将选项的宽度更改为50%来解决firefox的问题。我还将框大小设置为边框框。我在上面的代码中做了一些其他调整，以提高跨浏览器的一致性。