并排显示选择框内的两个选项 [英] Display two options within select box side by side

问题描述

我一直试图在列表中的两个选项旁边显示一个选择框。这证明是困难的，我似乎找不到任何提供此功能的库。例如：

 < select> 
 
< option x>< option y> 
< option x>< option y> 
< option x>< option y> 
< option x>< option y> 
< option x>< option y> 
 
< / select> 
  

您可以看到这里（对不起，我不能做一个jsfiddle，因为显然我无法使它工作！）与右眼PWR ： 下拉列表。

我尝试根据样式的内容来移动选项，即左移50％的宽度并右移，但我没有太多运气（尤其是跨浏览器，它不会是一个很好的方式）。任何有关解决这个问题的最佳方法的建议将非常感激。先谢谢你。

解决方案

为了能够做到这一点，您需要能够下载这个 jquery库。它使您能够按列排序选择下拉菜单。通过添加到您的网站：

 < script type =text / javascript> 
 
 $（document）.ready（function（）{
 $（'＃selector'）。gentleSelect（）; //将gentleSelect应用于默认选项
}）; 
 
< / script> 
  

在添加完成后，通过使用自述文件，您可以选择一定数量的列显示在您的选择框中。

您可以通过添加一些自定义代码来改变功能（就像在我的问题中一样，将它们并排放在正面和负面上）。 b

您可以在此处看到Js Bin

I've been trying to shown an select box with two options beside eachother within the list. It is proving difficult and I cant seem to find any libraries that offer this functionality. For example:

<select>

<option x><option y>
<option x><option y>
<option x><option y>
<option x><option y>
<option x><option y>

</select>

You can see an example of this working here (Sorry i cant do a jsfiddle as obviously i can't get it working!) with the "Right Eye PWR:" dropdown list.

I have tried to move the option based on its content by style i.e. floating left with a width of 50% and floating right but I'm not having much luck with that (Especially as across browsers it wouldn't be a great way of doing it). Any suggestions about the best way to tackle this problem would be very much appreciated. Thank you in advance.

解决方案

To be able to do this you need to be able to download this jquery library. It enables you to sort a select drop down menu by columns. By adding in this to your site:

    <script type="text/javascript">

                    $(document).ready(function() {
                        $('#selector').gentleSelect(); // apply gentleSelect with default options
                    });

    </script>

After this has been added, through using their readme you can select a certain amount of columns to display in your select box.

You can change the functionality (Like in my question putting them side by side with positive and negative) by adding a bit of custom code.

You can see a Js Bin here

这篇关于并排显示选择框内的两个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！