How to add a DIV to select option using javascript

Question

My question is about java script, i want to put or add a div or button or input inside select tag using java script.

I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.

i want the div inside select element like this picture : https://i.sstatic.net/Xd6FX.jpg

this is my html code

<div class="select-box-style right">
                    <div class="your-list-title">Your Lists</div>

                    <select multiple="multiple" class="md_what_get right SlectBox">
                        <option selected value="electronics">Electronics</option>
                        <option value="games">Video Games</option>
                        <option value="books">Books</option>
                        <option value="others">Others</option>
                        <option value="others"><input type="text" name="lname"></option>
                    </select>
                    <div class="add-list-box">
                        <input type="text" class="input-add-list"/>
                        <label class="label-spcbtn-blue spr" >Add</label>
                    </div>
                </div>

and this how to call the plugin:

<script type="text/javascript">
                    $(document).ready(function () {
                        $('.SlectBox').SumoSelect();
                    });
                </script>

thank you for helping!

.... Update!

see this link http://wenzhixin.net.cn/p/multiple-select/docs/

On The Filter1 you can see the input search inside select element, how can i do that?

You can only put option or optgroup tags within a select: w3.org/TR/html5/forms.html#the-select-element — Rick Hitchcock
– Rick Hitchcock, Commented Jun 5, 2015 at 17:55
If you're ever having difficulties getting HTML to show properly, start off by validating it: validator.w3.org. As Rick said, the select tag cannot have input or div tags within them. — Devin H.
– Devin H., Commented Jun 5, 2015 at 17:59
@RickHitchcock thank you for answer can you see the link Update you can see on the filter1 a input inside this list ccan you help me how can i do that? — iklas
– iklas, Commented Jun 5, 2015 at 18:05
Ahh, your updated question references multiple-select, which takes a select object and changes it into divs and lis, which can hold inputs, etc. I'm unfamiliar with that plugin, but someone else may be able to help you. — Rick Hitchcock
– Rick Hitchcock, Commented Jun 5, 2015 at 18:07
thank you @RickHitchcock if you know anyone may be able to help me share this question with hem thank you — iklas
– iklas, Commented Jun 5, 2015 at 18:12

Rodrigo Brancher · Accepted Answer · 2015-06-05 18:20:55Z

1

Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:

<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic. That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.

But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

edited Jun 5, 2015 at 18:20

answered Jun 5, 2015 at 18:17

Rodrigo Brancher

1406 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

iklas Over a year ago

@RodrigoBrancher can you help me please to write this code lika what i want on the image on my question?

iklas Over a year ago

@RodrigoBancher i'm beginner so i not sure for your answer or you can say i'm not understand your answer pleas write me the code if you can, and thank you soo much!

iklas Over a year ago

@RickHitchcock if you understand Rodrigo's answer can you help me to write the code pleas

Rick Hitchcock Over a year ago

@Machine: Your post refers to two separate plug-ins: SumoSelect (which is in your JavaScript code), and multiple-select (which is in your link). I'm unfamiliar with either plug-in. But if you narrow it down to one or the other, someone may be able to help you.

iklas Over a year ago

@RickHitchcock i use just one plugin is sumoselect i'm not use two plugins multiple-select is just example to show you the div can add to select tag im using one plugin

|

Collectives™ on Stack Overflow

How to add a DIV to select option using javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related