We help IT Professionals succeed at work.

Need multi line options in <select>

Richard Korts
on
Trying to find a way to allow a <select> element to have <option> items span multiple lines.

Found this & it looks great: http://jsfiddle.net/ZTs42/2/

Can't get it to work on my situation.

In head section, I have these:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>

and this css:

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
                  width: 400px; /* Width of the dropdown button */
                  border-radius:0;
                  max-height:100px;
            }

            .selectboxit-options .selectboxit-option .selectboxit-option-anchor {
                  white-space: normal;
                  min-height: 30px;
                  height: auto;
            }

This in HTML: (first few options only shown)

<select name="sprop">
                        <option value="">--- Select a Property ---</option>
                                                      <option value="10644" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date 02/22/2020</option>
                                                      <option value="10645" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: AB7593, test date 02/22/2020</option>
                                                      <option value="10647" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 98765432, test date 02/22/2020</option>
                                                      <option value="10648" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 123ABC465, test date 02/22/2020</option>
                                                      <option value="10646" >2300 East Valley Parkway, Houston, 92027-SN: 98765432, test date 02/22/2020</option>
                                                      <option value="10620" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date 02/21/2020</option>
I am almost certain I have to attach a class to the select element but the I don't see it in the jsfiddle.

I did NOT include the jQuery because I don't need the alert.

What's wrong?
Comment
Watch Question

Ryan ChongSoftware Tead Lead / Business Analyst / System Analyst / Data Engineer
SILVER EXPERT

Commented:
I guess you still need this part of codes to initial the setting?

$("#testselectset").selectBoxIt({
				theme: "default",
				defaultText: "Make a selection...",
                autoWidth: false
			});

Open in new window

Richard KortsBusiness Owner / Chief Developer

Author

Commented:
You mean I eliminate my first option (<option value="">--- Select a Property ---</option>) and apply ID of testselectset to my select element?

Thanks
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
See attached. Box with red text is from Chrome debugger.

Box with line numbers is from show source (to show line 230)

I don't understand what this means. Can someone help?

Thank you
selectboxit.PNG
testselectset.PNG
Ryan ChongSoftware Tead Lead / Business Analyst / System Analyst / Data Engineer
SILVER EXPERT

Commented:
something like this worked for me.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>

<style>
.selectboxit-container .selectboxit,
.selectboxit-container .selectboxit-options {
    width: 600px;
    /* Width of the dropdown button */
    border-radius: 0;
    max-height: 240px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}
</style>

<select name="sprop">
    <option value="">--- Select a Property ---</option>
    <option value="10644">2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date
        02/22/2020</option>
    <option value="10645">2300 East Valley Parkway, Space 152, Escondido, 92027-SN: AB7593, test date 02/22/2020
    </option>
    <option value="10647">2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 98765432, test date
        02/22/2020</option>
    <option value="10648">2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 123ABC465, test date
        02/22/2020</option>
    <option value="10646">2300 East Valley Parkway, Houston, 92027-SN: 98765432, test date 02/22/2020</option>
    <option value="10620">2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date
        02/21/2020</option>
</select>

<script type="application/javascript">
$(function() {

    //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
    $(function() {
        //Calls the selectBoxIt method on your HTML select box.
        $("select").selectBoxIt({
            theme: "default",
            defaultText: "Make a selection...",
            autoWidth: false
        });
    });

});
</script>

Open in new window


tmp.jpg
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
I tried it, my html attached. It DOES NOT wrap for me.

What is wrong with mine?

Thank you
test_mline_select.htm
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
I found out more by running with Chrome debugger on. My site requires https, Chrome says I can't access an http site from https, so I changed all the links / scripts at the top to https.

I get the attached Chrome exception.

My latest HTML attached.

Can you suggest how to get around this?

Thanks
test_mline_select.htm
DOMException.PNG
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Ryan, do you have any inputs on this?

Can someone else jump in or do I have to start another question?

It seems now that as soon as one person jumps in on EE, the unwritten protocol is it's hands off for everyone else.

It's not clear that always leads to the best result.

Thank you,

Richard
Software Tead Lead / Business Analyst / System Analyst / Data Engineer
SILVER EXPERT
Commented:
I believe you forgot to put in the end script tag?

</script>


<script type="application/javascript">
    //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
    $(function() {
        //Calls the selectBoxIt method on your HTML select box.
        $("select").selectBoxIt({
            theme: "default",
            defaultText: "Make a selection...",
            autoWidth: false
        });
    });
</script> << This is needed.
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Ryan Chong,

Great, thanks, works PERFECTLY now!
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Ryan, sorry, not quite done yet. The place it worked was effectively a copy of what you did, structured in correctly nested html.

I tried it in the "real" program, it fails in some odd way. Chrome debugger screen shot attached. Also attached, full html of the rendered real page. One thing I am not clear on is where to put this:

<script type="application/javascript">
                              $(function(){
                                    //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
                                    $(function() {
                                          //Calls the selectBoxIt method on your HTML select box.
                                          $("select").selectBoxIt({
                                                theme: "default",
                                                defaultText: "Make a selection...",
                                                autoWidth: false
                                          });
                                    });

                              });
                              </script>      

As you will see in the rendered HTML, it is in line right after the </select> line. Or maybe the fact there are multiple <select> in the html makes a difference?

Thank you,

Richard
choose_property.html
chrome_debugger.PNG
Ryan ChongSoftware Tead Lead / Business Analyst / System Analyst / Data Engineer
SILVER EXPERT

Commented:
you're including jQuery twice in your codes, so you probably can define it like this instead:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css">

   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>
   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Open in new window


Capture.PNG
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Perfect, Ryan.

Thank you again.

I will have another related question, I will open a new question so you can respond to it also, if you like.

Thanks,

Richard