Link to home
Create AccountLog in
Avatar of Richard Korts
Richard KortsFlag 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?
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

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

Avatar of 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
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
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


User generated image
I tried it, my html attached. It DOES NOT wrap for me.

What is wrong with mine?

Thank you
test_mline_select.htm
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
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
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Ryan Chong,

Great, thanks, works PERFECTLY now!
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
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


User generated image
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