Develop Reference

Collecting input data and showing it in div

I have some quantity inputs. I want to collect the data in "inputs" and show them in "#yolcudropdown". But I just can't pull the data. Inputs must be disabled. There should be no manual entry. I did something at the bottom of the "javascript" section. But I couldn't run it.
(function( $ ) {
$.fn.number = function(customOptions) {
var options = {
'containerClass' : 'number-style',
'minus' : 'number-minus',
'plus' : 'number-plus',
'containerTag' : 'div',
'btnTag' : 'span'
};
options = $.extend(true, options, customOptions);
var input = this;
input.wrap('<' + options.containerTag + ' class="' + options.containerClass + '">');
var wrapper = input.parent();
wrapper.prepend('<' + options.btnTag + ' class="' + options.minus + '"></' + options.btnTag + '>');
var minus = wrapper.find('.' + options.minus);
wrapper.append('<' + options.btnTag + ' class="' + options.plus + '"></' + options.btnTag + '>');
var plus = wrapper.find('.' + options.plus);
var min = input.attr('min');
var max = input.attr('max');
if(input.attr('step')){
var step = +input.attr('step');
} else {
var step = 1;
}
if(+input.val() <= +min){
minus.addClass('disabled');
}
if(+input.val() >= +max){
plus.addClass('disabled');
}
minus.click(function () {
var input = $(this).parent().find('input');
var value = input.val();
if(+value > +min){
input.val(+value - step);
if(+input.val() === +min){
input.prev('.' + options.minus).addClass('disabled');
}
if(input.next('.' + options.plus).hasClass('disabled')){
input.next('.' + options.plus).removeClass('disabled')
}
} else if(!min){
input.val(+value - step);
}
});
plus.click(function () {
var input = $(this).parent().find('input');
var value = input.val();
if(+value < +max){
input.val(+value + step);
if(+input.val() === +max){
input.next('.' + options.plus).addClass('disabled');
}
if(input.prev('.' + options.minus).hasClass('disabled')){
input.prev('.' + options.minus).removeClass('disabled')
}
} else if(!max){
input.val(+value + step);
}
});
};
})(jQuery);
$('.quntity-input').each(function () {
$(this).number();
});
/* THIS IS IMPORTANT */
$(document).ready(function() {
$(document).on('change', '.btw', function() {
$('#yolcudropdown').text($(this).val());
});
});
.number-style {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.number-style .number-minus,
.number-style .number-plus {
height: 28px;
background: #ffffff;
border: 2px solid #e2e2e2 !important;
width: 28px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
line-height: 23px;
font-size: 19px;
font-weight: 700;
text-align: Center;
border: none;
display: block;
cursor: pointer;
}
.number-style .number-minus:active,
.number-style .number-plus:active {
background: #e2e2e2;
}
.number-style .number-minus {
line-height: 20px;
}
.number-style .number-minus::after {
content: "-";
font-size: 10px;
}
.number-style .number-plus {
line-height: 18px;
}
.number-style .number-plus::after {
content: "+";
font-size: 10px;
}
.number-style .quntity-input {
width: 28px;
background: #e00f23;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
line-height: 21px;
font-size: 14px;
color: #ffffff;
font-weight: 700;
text-align: Center;
margin: 0 5px;
display: block;
cursor: pointer;
text-align: center;
border: none;
height: 28px;
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="quntity-input btw" type="text" value="0" step="1" min="0" max="10">
<input class="quntity-input btw" type="text" value="0" step="1" min="0" max="10">
<div id="yolcudropdown">İnput quantity show this div</div>
"class" names of "input" elements are the same. I need to collect inputs with the same value and display them in the div instantly

HTMLInputElement
Input type "text" has no min max or step attributes, so your HTML is absolutely invalid. Try not to write It-works, I'm a framework -code. Respect the W3C standards.
Use type="number" (CSS pseudos can help you remove default spinner arrows from such elements)
Also step could be floats. Respect that and use parseFloat() in JS
CSS Flex to align stuff
Seems you know about CSS-flex, use it! Height, therefore- line-height... 19? 20? 23px? No. Just use flex.
CSS !important
!important is sign of poor coding style and should be left to Bootstrap only. Or to hopefully override Bootstrap styles - or in that cases when developers actually know what they are doing.
jQuery Plugins
jQuery plugins, I suggest to read the DOCS and get a deeper knowledge on how plugins work. Almost every jQuery method is a plugin. .hide() , .addClass()... I won't count them all. Plugins are chainable .removeClass("foo").stop().fadeTo(1), and so should be your .number() plugin.
To achieve chain-ability you simply return the bound this. PS: that's not jQuery... that's how JS works.
jQuery Plugins are not meant to be called inside a $.each() loop. $() is already a collection of DOM Nodes wrapped in a jQuery Object. No need to .each(). Same like: you would rather use $('a').css({color:'blue'}) instead of $('a').each(){ $(this).css({color: 'blue'}); });. Same effect, less code. Plugins.
jQuery DOM ready
jQuery(function($) { }); // DOM ready and $ alias in scope
Or if you don't care about ±IE, or you use ES6 syntax and a toolchain like Babel than: jQuery($ => { }) will suffice.
jQuery $ Object Constructor
jQuery allows you to define an HTMLElement that will eventually become a new DOM element wrapped with all the jQuery powers, Methods. Meaning that, if instead of passing a selector, you pass a more complex Tag-alike string (say: $("<span/>", {}); - jQuery will create an inMemory SPAN element and allow you to use the second parameter {} for most of the available jQuery Methods for that $Element. Let's use this!
jQuery plugin callbacks
If you want to provide a callback after a user changes the input value, provide a callback method. Don't force a programmer to write new spaghetti code, stick to the scope of your available Plugin internal Methods.
Sum Elements values
To sum Elements values you can use Array.prototype.reduce, just make sure to use an initialValue to prevent possible TypeErrors.
Example
Finally, here's the simplified CSS and improved JS:
(function($) {
$.fn.number = function(customOptions) {
const options = $.extend(true, {
containerTag: "div",
containerClass: "number-style",
minusClass: "number-minus", // consistency in wording!
minusText: "-", // Give power to the user!
plusClass: "number-plus",
plusText: "+",
btnTag: "button",
onChange() {}, // Provide a nifty callback!
}, customOptions);
this.each(function() { // Use .each() here!
const $input = $(this);
let val = parseFloat($input.value || 0); // floats!
const min = parseFloat($input.attr("min"));
const max = parseFloat($input.attr("max"));
const step = parseFloat($input.is("[step]") ? $input.attr("step") : 1);
const handleStyles = () => {
$minus.toggleClass('disabled', val <= min);
$plus.toggleClass('disabled', val >= max);
};
const change = () => {
val = Math.max(min, Math.min(max, val)); // Keep val in range.
$input.val(val); // Update input value
handleStyles(); // Update styles
options.onChange.call($input[0], val); // Trigger a public callback
}
const decrement = () => {
val -= step;
change();
};
const increment = () => {
val += step;
change();
};
const $minus = $(`<${options.btnTag}>`, {
type: "button",
title: "Decrement",
class: options.minusClass,
text: options.minusText,
on: {
click: decrement
}
});
const $plus = $(`<${options.btnTag}>`, {
class: options.plusClass,
title: "Increment",
text: options.plusText,
on: {
click: increment
}
});
const $wrapper = $(`<${options.containerTag}>`, {
class: options.containerClass,
});
$input.after($wrapper);
$wrapper.append($minus, $input.detach(), $plus); // Append all
handleStyles(); // handle initial styles
});
return this; // make your plugin chainable!
};
})(jQuery);
jQuery(function($) { // DOM ready and $ alias in scope
const $quantityInp = $('.quantity-input'); // Cache your elements!
const $dropdown = $('#yolcudropdown'); // Cache your elements!
$quantityInp.number({
onChange(val) { // our custom onChange callback!
const tot = $quantityInp.get().reduce((acc, el) => {
acc += parseFloat(el.value);
return acc;
}, 0);
$dropdown.text(tot);
}
});
});
/* QuickReset */ * { margin:0; box-sizing:border-box; }
.number-style input::-webkit-outer-spin-button,
.number-style input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.number-style {
display: flex;
}
.number-style > * {
height: 2em;
min-width: 2em;
border-radius: 2em;
display: flex; /* Use flex. */
justify-content: center;
text-align: center;
border: 0;
background: #ddd;
}
.number-style button {
background: #fff;
box-shadow: inset 0 0 0 2px #ccc;
cursor: pointer;
user-select: none;
/* no highlight, please! */
}
.number-style button:active {
background: #0bf;
}
.number-style input {
background: #e00f23;
color: #fff;
margin: 0 5px;
}
.number-style .disabled {
opacity: 0.2;
cursor: default;
}
/* Custom overrides: */
.number-style>* {
width: 2em;
/* just for roundness */
}
<input class="quantity-input" type="number" value="0" step="1" min="0" max="10">
<input class="quantity-input" type="number" value="0" step="1" min="0" max="10">
<div id="yolcudropdown">0</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Additional reading:
HTMLInputElement
Math/min
Math/max
jQuery plugin-creation
$ new-elements
Array/reduce
jQuery.toggleClass()
And PS: it's "quantity", not "quntity"

onmouseover not working in option [duplicate]

I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.
Relevant code:
Select chunk of form:
<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>
Manipulating selects (arrays defined earlier):
function rankFeatures(create) {
var $optionList = $("#optionList");
var $ranks = $("#ranks");
if(create == true) {
for(i=0; i<5; i++){
$optionList.append(features[i]);
};
}
else {
var index = $optionList.val();
$('#optionList option:selected').remove();
$ranks.append(features[index]);
};
}
This all works. It all falls apart when I try to deal with hovering over options:
$(document).ready(
function (event) {
$('select').hover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})
I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up.
I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?

You can use the mouseenter event.
And you do not have to use all this code to check if the element is an option.
Just use the .on() syntax to delegate to the select element.
$(document).ready(function(event) {
$('select').on('mouseenter','option',function(e) {
alert('yeah');
// this refers to the option so you can do this.value if you need..
});
});
Demo at http://jsfiddle.net/AjfE8/

try with mouseover. Its working for me. Hover also working only when the focus comes out from the optionlist(like mouseout).
function (event) {
$('select').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
})
})

You don't need to rap in in a function, I could never get it to work this way. When taking it out works perfect. Also used mouseover because hover is ran when leaving the target.
$('option').mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
console.log('yeah!');
};
})​
Fiddle to see it working. Changed it to console so you don't get spammed with alerts. http://jsfiddle.net/HMDqb/

That you want is to detect hover event on option element, not on select:
$(document).ready(
function (event) {
$('#optionList option').hover(function(e) {
console.log(e.target);
});
})​

I have the same issue, but none of the solutions are working.
$("select").on('mouseenter','option',function(e) {
$("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
$("#show-me").hide();
});
$("option").mouseover(function(e) {
var $target = $(e.target);
if($target.is('option')) {
alert('yeah!');
};
});
Here my jsfiddle https://jsfiddle.net/ajg99wsm/

I would recommend to go for a customized variant if you like to ease
capture hover events
change hover color
same behavior for "drop down" and "all items" view
plus you can have
resizeable list
individual switching between single selection and multiple selection mode
more individual css-ing
multiple lines for option items
Just have a look to the sample attached.
$(document).ready(function() {
$('.custopt').addClass('liunsel');
$(".custopt, .custcont").on("mouseover", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "block")
} else {
$(this).addClass("lihover");
}
})
$(".custopt, .custcont").on("mouseout", function(e) {
if ($(this).attr("id") == "crnk") {
$("#ranks").css("display", "none")
} else {
$(this).removeClass("lihover");
}
})
$(".custopt").on("click", function(e) {
$(".custopt").removeClass("lihover");
if ($("#btsm").val() == "ssm") {
//single select mode
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
$(this).removeClass("liunsel");
$(this).addClass("lisel");
} else if ($("#btsm").val() == "msm") {
//multiple select mode
if ($(this).is(".lisel")) {
$(this).addClass("liunsel");
$(this).removeClass("lisel");
} else {
$(this).addClass("lisel");
$(this).removeClass("liunsel");
}
}
updCustHead();
});
$(".custbtn").on("click", function() {
if ($(this).val() == "ssm") {
$(this).val("msm");
$(this).text("switch to single-select mode")
} else {
$(this).val("ssm");
$(this).text("switch to multi-select mode")
$(".custopt").removeClass("lisel");
$(".custopt").addClass("liunsel");
}
updCustHead();
});
function updCustHead() {
if ($("#btsm").val() == "ssm") {
if ($(".lisel").length <= 0) {
$("#hrnk").text("current selected option");
} else {
$("#hrnk").text($(".lisel").text());
}
} else {
var numopt = +$(".lisel").length,
allopt = $(".custopt").length;
$("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
}
}
});
body {
text-align: center;
}
.lisel {
background-color: yellow;
}
.liunsel {
background-color: lightgray;
}
.lihover {
background-color: coral;
}
.custopt {
margin: .2em 0 .2em 0;
padding: .1em .3em .1em .3em;
text-align: left;
font-size: .7em;
border-radius: .4em;
}
.custlist,
.custhead {
width: 100%;
text-align: left;
padding: .1em;
border: LightSeaGreen solid .2em;
border-radius: .4em;
height: 4em;
overflow-y: auto;
resize: vertical;
user-select: none;
}
.custlist {
display: none;
cursor: pointer;
}
.custhead {
resize: none;
height: 2.2em;
font-size: .7em;
padding: .1em .4em .1em .4em;
margin-bottom: -.2em;
width: 95%;
}
.custcont {
width: 7em;
padding: .5em 1em .6em .5em;
/* border: blue solid .2em; */
margin: 1em auto 1em auto;
}
.custbtn {
font-size: .7em;
width: 105%;
}
h3 {
margin: 1em 0 .5em .3em;
font-weight: bold;
font-size: 1em;
}
ul {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
<div>
<button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
</div>
<div id="hrnk" class="custhead">
current selected option
</div>
<ul id="ranks" class="custlist">
<li class="custopt">option one</li>
<li class="custopt">option two</li>
<li class="custopt">another third long option</li>
<li class="custopt">another fourth long option</li>
</ul>
</div>

Light box pop up form in jquery

Here is my code:
Please fill out my form.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,
Any help would be appreciated, Thank you.

To start working with javascript, you would need a javascript library API. You must have heard about JQuery, this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox.
Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>
Then start using colorbox just like below
Please fill out my form.
$(document).ready(function(){
$("#test").click(function(){ //on clicking the link above
$(this).colorbox({ //this would capture the url from the href
width:'500px', //width of the colorbox
height:'auto', //height of the colorbox
initialWidth:'500px', //initial width upon loading
initialHeight:'auto', //initial height upon loading
speed:0, //animation speed
opacity:0.2, //background opacity
overlayClose: true, //close upon clicking anywhere
title:'Your Form Title', //your form title name
onComplete: function(){
//do something when the colorbox loaded completely
}
});
})
});

Take a look on this following example. This is custom light box without any plugin:
Updated Fiddle
jQuery:
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 148,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() + 50 + 'px'
});
};
$('#test').click(function(e) {
e.preventDefault();
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
&& lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
{
lightBox.hide();
lightBoxContent.hide();
}
});
CSS:
body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
display: none;
}
#lb-content {
color: #222;
height: 150px;
width: 260px;
border: 16px solid #222;
background-color: #fff;
position: relative;
text-align: center;
padding-top: 10px;
border-radius: 4px;
display: none;
}
#lb-close {
display: block;
height: 22px;
width: 25px;
background-color: red;
color: #fff;
position: absolute;
top: -25px;
right: -25px;
cursor: pointer;
text-align: center;
border-radius: 10px;
}
You can go for jQuery Plugin also:
http://lokeshdhakar.com/projects/lightbox2/
http://dimsemenov.com/plugins/magnific-popup/
http://www.jacklmoore.com/colorbox/

Make contents of div scroll down with overflow

I have created a small chat system for a project I am making. The chat is functioning well. However, I cannot figure out how to make it so the div stays at the bottom of the chat, rather than having to scroll down to read the last thing someone said.
I am referring to another similar question posted on here for guidance. How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?
But it still will not work for me. The chat is then stored in a chat.txt file. Each line is surrounded in tags. The following is the code I am using.
js in header:
$container = $('#chat-area');
$container[0].scrollTop = $container[0].scrollHeight;
$('#sendie').keypress(function (e) {
if (e.which == 13) {
$container = $('#chat-area');
$container.append('<p>' + e.target.value + '</p>');
$container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
}
});
chat.php:
<script type="text/javascript">
// strip tags
name = name.replace(/(<([^>]+)>)/ig,"");
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
// kick off chat
var chat = new Chat();
$(function() {
chat.getState();
// watch textarea for key presses
$("#sendie").keydown(function(event) {
var key = event.which;
//all keys including return.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// don't allow new content if length is maxed out
if (length >= maxLength) {
event.preventDefault();
}
}
});
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
});
</script>
<p id="name-area"></p>
<div id="chatWrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength = '100' ></textarea>
</form>
</div>
css:
#pageWrap
{
position: fixed;
display: block;
right: 0;
bottom: 0;
background: #8B1918;
box-shadow: 0px 0px 12px #333;
transition: height .5s;
}
#pageWrap p
{
color: white;
font-family: arial;
margin-left: 5px;
margin-bottom: 4px;
}
#chatWrap
{
width: 200px;
height: 200px;
overflow: scroll;
overflow-x:hidden;
box-shadow: 1px 1px 10px #333 inset;
color: white;
font-family: arial;
font-size: 14px;
}
#chat-area
{
padding-left: 11px;
}
#sendie
{
resize: none;
display: block;
width: 92%;
margin-left: auto;
margin-right: auto;
margin-bottom: 6px;
}

I got it (partially) working for you. Here are the issues I discovered:
Try not to name variables starting with $ - it creates unnecessary confusion.
You didn't declare $container as var, so you're using a variable before declaring it.
jQuery supports 99% of everything you can do with plain Javascript, but makes it better. Wherever possible, I changed your code to use jQuery instead.
I'm not sure about e.target.value, but $('#sendie').val() works just as well.
You definitely needed to wrap this in the body onload function.
You want to add e.preventDefault(); in the event handler so that it doesn't put a return character in the box.
You didn't clear the input textarea (with jQuery it's just $('#sendie').val('');).
The font color of the chat message area was white (at least on JSFiddle it was). Messages were invisible due to this.
Here's a fiddle demonstrating everything working (as far as I know) - http://jsfiddle.net/U9XAv/
And here's the updated Javascript:
$(function()
{
var container = $('#chat-area');
container.css('scrollTop', container.css('scrollHeight'));
$('#sendie').keydown(function (e)
{
if (e.which == 13)
{
container.append('<p>' + $(this).val() + '</p>')
.animate({ scrollTop: container[0].scrollHeight) }, "slow");
$(this).val('');
e.preventDefault();
}
});
});
And the CSS I changed:
#chat-area
{
padding-left: 11px;
color: black;
}

Plain simple select tag styling

I've been looking for a way to style a couple of <select> tags in a madlib-esque fashion.
I want the select box width to be based on what is selected and not show extra whitespace.
I'm looking for a way to make this as cross-browser compatible as possible right now it works fine in webkit but the dreaded arrows show in firefox.
Progressive enhancement JS only, fallback to regular select field.
Here is my fiddle: http://jsfiddle.net/bXJrk/
Any help on achieving this would be greatly appreciated.
$('select').each(function(){
var width = $('option[value='+$(this).val()+']').html();
$('body').append('<span id="'+$(this).val()+'" style="display:none">'+width+'</span>');
var two = $('#'+$(this).val()).width();
$(this).width(two+4).addClass('jsselect');
});
$('select').change(function(){
var width = $('option[value='+$(this).val()+']').html();
$('body').append('<span id="'+$(this).val()+'" style="display:none">'+width+'</span>');
var two = $('#'+$(this).val()).width();
$(this).width(two+4);
});

This is what I got out.
The fiddle: http://jsfiddle.net/wAs7M/4/
Javascript:
$('.replacementcontainer select').each(function(){
var apply = function(el){
var text = $('option[value='+el.val()+']').html();
var span;
if (el.data('initialized'))
{
span = el.parent().next().html(text);
}
else
{
el.data('initialized', true);
el.after('<span id="'+el.val()+'" class="jsselect hiddenspan">'+text+'</span>');
el.wrap($('<span class="selwrapper"></span>'));
span = el.parent().next();
span.addClass('jsselect');
el.addClass('jsselect');
}
el.parent().width(span.width() + 5);
var two = span.width();
};
apply($(this));
$(this).change(function(){ apply($(this)); });
});
CSS:
*{font-family:sans-serif;font-size:15px}
.replacementcontainer {
margin: 10px;
}
.replacementcontainer span {
display: inline-block;
margin-bottom: -4px;
}
.jsselect {
color: #3084CA;
text-decoration: underline;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
}
.selwrapper {
display: inline-block;
overflow: hidden;
}
.hiddenspan {
visibility:hidden;
position:absolute;
}