We Keep Coding

Change multiple select to a single select dropdown

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.

popup to display selected options using javascript or ajax

i have a HTML code in which user can select multiple options. As the user is selcting options, the selected options should be displayed in either a popup using ajax or a div...I have already tried using selectbox with checkbox but that doesn't work and it became difficult to fetch parameters for further usage in perl cgi script. There is no code available for this..What is the easy way to get the selected options in a popup? i want the options to be displayed in the popup as they are getting selected.
HTML code:
<td>Server Name <font color = red>*</font></td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>

You can easily get the selected options.
You need to add onchange event first, and loop the options and get the selected values. Something like this:
<td>Server Name
<font color = red>*</font>
</td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" onChange="getSelectedServers()" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>
<div id="displaySelectedServers">
</div>
<script>
function getSelectedServers() {
var e = document.getElementById("slist");
var serversList = '';
for(var i = 0; i < e.options.length; i++) {
if (e.options[i].selected) {
serversList += '| ' + e.options[i].value + ' |';
}
}
document.getElementById("displaySelectedServers").innerHTML = serversList;
}
</script>
I hope my answer was helpful :)

Additional html for pop up div:
<div id=popUp>
</div>
addition CSS for popUp div:
#popUp{
display: none; // required if div is to "pop up" on change.
border: 1px solid black; // optional, put it here to give an idea on how to approach working with this div.
border-radius:4px; // optional
width:200px; // optional
min-height: 100px; // optional
}
#popUp>p{
display: inline-block; // optional
margin: 5px; // optional
}
and the jQuery to listen to changes in the select element iterate through the options to review which are selected and display the text content of those also in the pop up div:
$("select#slist").change(function(){ // Listen to <select> changes
$("div#popUp").show().empty(); // Make sure popUp is shown and cleared of contents.
$(this).find("option").each(function(index, value){ // Find options, iterate through them
if($(value).prop("selected")){ // check if option is selected
$("div#popUp").append(`<p>${$(value).text()}</p>`) // append option text content to popUp
}
});
});

Move the search box in a select2

I am trying to move the search box in a select2, so that it will appear on the bottom of the results when the select is opening above and on the top when the select2 is opening below.
It should basically look like this:
I have tried the following and although the moving part works, I cna not find a way to attach it to the proper event. if you scroll the page and the select go from above to belove, the search box will not change back because it is attacched to the select2:open event.
Is there an event (like render maybe) that I can use to make sure that I can change the position of the search box every time the select2 moves?
OR
How can I move the search box to always be at the bottom when select2 opens above and at the top when it opens below?
you can see it in this https://codepen.io/anon/pen/ZaxZOa better than the snippet because you can also scroll here.
$( document ).ready( function() {
$( '.js-example-basic-single' ).select2();
//$('.select2-results').insertAfter('.select2-search--dropdown');
$('.js-example-basic-single').on('select2:open', function(){
$('.select2-dropdown--above .select2-search--dropdown').insertAfter('.select2-results');
});
});
.form-control {
width: 360px;
height: 34px;
padding: 6px 12px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<h1>Select2</h1>
<div class="col">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<label for="js-example-basic-single">Select2: select a US state</label><br>
<select class="js-example-basic-single form-control" id="js-example-basic-single">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>

I solved this with CSS flexbox. Making the selct2 a flex and then changing the order of the search andresult divs.
.select2-dropdown--above{
display: flex; flex-direction: column;
}
.select2-dropdown--above .select2-search--dropdown{
order: 2;
}
.select2-dropdown--above .select2-results {
order: 1;
}
.select2-dropdown--below{
display: flex; flex-direction: column;
}
.select2-dropdown--below .select2-search--dropdown{
order: 1;
}
.select2-dropdown--below .select2-results {
order: 2;
}

jquery select-box - how can I have two inputs different widths

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.

How can I create an editable combo box in HTML/Javascript?

I need to let users select an item from a dropdown list, but also allow them to instead enter any text, even if it doesn't match an item in the list. How can I achieve this on a web page with HTML and Javascript?
The select field doesn't let users enter text, and the input text field doesn't show the preferred alternatives.
All items must show if the user opens the dropdown, so it can't be a simple auto-complete that only shows matching items.

Here is a script for that:
Demo,
Source
Or another one which works slightly differently:
link removed (site no longer exists)

I know this question is already answered, a long time ago, but this is for other people that may end up here and are having trouble finding what they need. I had trouble finding an existing plugin that did exactly what I needed, so I wrote my own jQuery UI plugin to accomplish this task. It's based on the combobox example on the jQuery UI site. Hopefully it might help someone.
https://github.com/tmooney3979/jquery.ui.combify

Was looking for an Answer as well, but all I could find was outdated.
This Issue is solved since HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
If I had not found that, I would have gone with this approach:
http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

You can try my implementation of editable combobox http://www.zoonman.com/projects/combobox/

I think this will meet your requirements:
https://github.com/RUPOJS/jsCombo

Forget datalist element that good solution for autocomplete function, but not for combobox feature.
css:
.combobox {
display: inline-block;
position: relative;
}
.combobox select {
display: none;
position: absolute;
overflow-y: auto;
}
html:
<div class="combobox">
<input type="number" name="" value="" min="" max="" step=""/><br/>
<select size="3">
<option value="0"> 0</option>
<option value="25"> 25</option>
<option value="40"> 40</option>
</select>
</div>
js (jQuery):
$('.combobox').each(function() {
var
$input = $(this).find('input'),
$select = $(this).find('select');
function hideSelect() {
setTimeout(function() {
if (!$select.is(':focus') && !$input.is(':focus')) {
$select
.hide()
.css('z-index', 1);
}
}, 20);
}
$input
.focusin(function() {
if (!$select.is(':visible')) {
$select
.outerWidth($input.outerWidth())
.show()
.css('z-index', 100);
}
})
.focusout(hideSelect)
.on('input', function() {
$select.val('');
});
$select
.change(function() {
$input.val($select.val());
})
.focusout(hideSelect);
});
This works properly even when you use text input instead of number.

try doing this
<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px;
position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
<div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
top: 0px; left: 0px; z-index: 1; width: 165px;">
<option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>
please look at following example fiddle