AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Richard Korts
Richard Korts
Flag for United States of America asked on

Need multi line options in <select>

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?
CSSHTML
Avatar of undefined
Last Comment
Richard Korts
8/22/2022 - Mon
Ryan Chong
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 Korts
ASKER
You mean I eliminate my first option (<option value="">--- Select a Property ---</option>) and apply ID of testselectset to my select element?

Thanks
Richard Korts
ASKER
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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Ryan Chong
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 Korts
ASKER
I tried it, my html attached. It DOES NOT wrap for me.

What is wrong with mine?

Thank you
test_mline_select.htm
Richard Korts
ASKER
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
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Richard Korts
ASKER
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
ASKER CERTIFIED SOLUTION
Ryan Chong
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Richard Korts
ASKER
Ryan Chong,

Great, thanks, works PERFECTLY now!
Richard Korts
ASKER
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
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Ryan Chong
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 Korts
ASKER
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
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent