CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Richard Cripps
Richard Cripps

Reputation: 193

Display two options within select box side by side

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.

Upvotes: 1

Views: 1771

Answers (1)

Richard Cripps
Richard Cripps

Reputation: 193

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

Upvotes: 1

Related Questions