I'm using this jquery plugin to make my select dropdown boxes look nicer. http://code.google.com/p/select-box/
Here's a fiddle of it working:
http://jsfiddle.net/FQKax/1/
I want to have the two dropdowns to be different widths but I've tried wrapping them in divs, tried to hack the js to give them different ids, everything I can think of but no joy.
Also I'm ashamed to admit I can't seem to change the color of the text in the actual dropdown bit. I can change the backgound colour etc but buggered if I can change the color of the text... weird
There's an option that you can specify what to use as classname for the sbHolder object, but you don't want to change that since you would need to rewrite the CSS. It'd be nice if they let you set an additional class to apply, but they don't.
I would just put a wrapper around the select element and use CSS to override the default width http://jsfiddle.net/FQKax/8/
.wrapper-one .sbHolder{
width: 500px;
}
.wrapper-two .sbHolder {
width: 200px;
}
<div class="wrapper-one">
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
<br/><br/>
<div class="wrapper-two">
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
This requires adding some markup, #cih's answer doesn't. It just requires using jQuery to mark each instance accordingly http://jsfiddle.net/FQKax/37/
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(index){
$(this).addClass('instance-' + index);
});
.instance-0.sbHolder{
width: 500px;
}
.instance-1.sbHolder {
width: 200px;
}
$(".sbHolder").first().addClass("first");
That will add a class you can target on you first checkbox, there better way to iterate through multiple selectors, check out this link..
Other than that Joe answers the rest of your question.
Try this
http://jsfiddle.net/FQKax/30/
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
<br/><br/>
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
##### JQUERY #######
$(function () {
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(){
var $langDom = $(this);
if($langDom.prev().attr('id') == 'language'){
$langDom.addClass("language_1");
} else if($langDom.prev().attr('id') == 'language2') {
$langDom.addClass("language_2");
}
});
});
###### CSSS TO ADD #####
.language_1{
width: 1200px;
}
.language_2{
width: 200px;
}
For the text color, change .sbOptions a:link, .sbOptions a:visited {} and/or .sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}.
For the widths, .sbOptions is your dropdown width, and .sbHolder {} is the width of the "currently selected" item.
Related
By default a <select> element is a dropdown menu which I don't want: I want to display the full list. This is possible with multiple:
<select name="pets" multiple size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
but then obviously the user can select multiple elements.
How to have a full list view (like with multiple, i.e. no dropdown menu), but have only one possible selected element?
Use the size attribute which takes the number of items you want to display and set it to the number of options you have (6) in order to get the full list view. Since you only want to allow 1 item to be selected, also remove the attribute multiple from the select element.
<select name="pets" size=6>
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
Check mdn for more information about the available attributes for the select element.
You can make the <select> 100% of the height of the <form> that contains it. See this fiddle for an example of a div enclosing a form, with a select filling the height of the form.
This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>
I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.
You can then just set the height of the select list to anything you want inside the form. Here's my CSS
div {
background-color: #fff0f0;
height: 40em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 90%;
}
#thelist {
height: 100%;
}
Put together as a snippet, and making it smaller to fit better here...
div {
background-color: #fff0f0;
height: 20em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 40%;
}
#thelist {
height: 100%;
}
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>
I've tested a few solutions and found that you had to remove the multiple attribute from the <select> element
<select name="pets" size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
I'm having an issue with a multiple select. The only way that can works what I am trying to make is with a multiple select, but I need to transform it to a single dropdown select because that way is design.
The question is: How can I transform a multiple select in a single select? I add a screenshot:
I have it like this:
and the design should be like this:
Is there anyway for transform it with html or css without remove the multiple="multiple" property?
My tag:
<select multiple="multiple" class="destination_s input input--select"></select>
Regards
The only way I see is to stylize a div that looks like an HTML select and with JavaScript show and hide the select Multiple. This is a quick example I just made (maybe the code could be better):
function showSelect(classname) {
document.getElementById('sel').className = classname;
}
.hidden {
display: none;
}
.visible {
display: block;
}
.div {
border: 1px solid black;
width: 100px;
}
#sel {
width: 100%;
}
.arrow {
float: right;
}
<div class="div" onmouseover="showSelect('visible')" onmouseout="showSelect('hidden')">
Choose... <span class="arrow">▼</span>
<select multiple="multiple" class="hidden" id="sel">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
</select>
</div>
Also consider use a framework like Chosen to make it more easily.
i got your point but it cant be possible with the help of HTML/CSS only.
You need have JS or jQuery at some point.
Please refer below plugins which might help you to sort it out.
http://wenzhixin.net.cn/p/multiple-select/docs/
https://www.jqueryscript.net/form/jQuery-Plugin-For-Multiple-Select-With-Checkboxes-multi-select-js.html
you can also use Chosen, Select2 Plugins too.
I made a select with javascript and filled its options with an array. Afterwards I wrote some jquery to try and change the backgroundColor of the option when I hover over it, but nothing seems to work. everytime I hover over the options they are still highlighted blue.
I'm new to javascript and jquery and this is an idea that I had of why this happens: could this be because there is a standard hover function in a select that will always override mine or am I really overlooking a mistake? Because I tested my code before on divs and the code worked like a charm here
My code:
//arraycommObjName is an array with 4 elements to fill my selection
//$('#commObjs') is my select
for (i=0; i < arraycommObjName.length; i++) {
$('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i]));
}
$(".testoptions").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"green":"red")
})
take note yes I know it's better to do this with css but it is asked to me to do it with only javascript and jquery.
You can use select2 and add some CSS to override the default styles.
Below is an example with some horrific colors to prove you can override the default select2 white and blue colors.
$("#states").select2();
#states {
width: 300px;
}
.select2-results__option {
color: orange;
background-color: seashell;
}
.select2-results__option--highlighted {
color: white !important;
background-color: darkgreen !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: darkgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="states">
<option value="">Select...</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
I am using Select2 jQuery Plugin.
https://select2.github.io/ for reference
When I am using the multiple dropdown option. The result of selected items is shown as tags in a box but, I just want to show the number of items selected.
Is it possible with Select2 jQuery plugin
HTML
<select multiple style="width:100%">
<option value="1">Name1</option>
<option value="2">Name2</option>
<option value="3">Name3</option>
<option value="4">Name4</option>
<option value="5">Name5</option>
<option value="6">Name6</option>
<option value="7">Name7</option>
</select>
JS
$('select').select2();
I want output as below
instead of tag like output.
Example working Fiddle
You can add this code after initializing select2
$('select').on('select2:close', function (evt) {
var uldiv = $(this).siblings('span.select2').find('ul')
var count = $(this).select2('data').length
if(count==0){
uldiv.html("")
}
else{
uldiv.html("<li>"+count+" items selected</li>")
}
Ref: jsfiddle
Reference to select2 events: Here
Edit: If you want to display a blank when user deselects everything,
Use this fiddle: here
Edit: Updated to remove flaw in deselection of data and changed it to main answer.
Fiddle: here
Selectors can certainly be improved, but as a blueprint, adding a counter element on change and hiding the tags like this seems to work as asked.
$('select').select2({closeOnSelect: false}).on("change", function(e) {
$('.select2-selection__rendered li:not(.select2-search--inline)').hide();
$('.counter').remove();
var counter = $(".select2-selection__choice").length;
$('.select2-selection__rendered').after('<div style="line-height: 28px; padding: 5px;" class="counter">'+counter+' selected</div>');
});
.counter{
position:absolute;
top:0px;
right:5px;
}
.select2-search--inline{
background-color:Gainsboro;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select multiple style="width:100%" id="mySelect">
<option value="1">Name1</option>
<option value="2">Name2</option>
<option value="3">Name3</option>
<option value="4">Name4</option>
<option value="5">Name5</option>
<option value="6">Name6</option>
<option value="7">Name7</option>
</select>
although the answer is given.
you can try this code. first initialize than on close call it.
jQuery('.multi-select-pbwp').select2();
$('.multi-select-pbwp').on('select2:close', function() {
const $select = $(this);
const numSelected = $select.select2('data').length;
$select.next('span.select2').find('ul').html(function() {
return `<li class="class="select2-selection__choice">${numSelected} selected</li>`;
})
});
How do you set the background color of an item in an HTML list?
select.list1 option.option2
{
background-color: #007700;
}
<select class="list1">
<option value="1">Option 1</option>
<option value="2" class="option2">Option 2</option>
</select>
I assume you mean the <select> input element?
Support for that is pretty new, but FF 3.6, Chrome and IE 8 render this all right:
<select name="select">
<option value="1" style="background-color: blue">Test</option>
<option value="2" style="background-color: green">Test</option>
</select>
I had this problem too. I found setting the appearance to none helped.
.class {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color: red;
}
Just like normal background-color: #f0f
You just need a way to target it, eg: <option id="myPinkOption">blah</option>