我有以下选择选项:
<select class="items" id="items" name="option">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
使用以下 JS:
var numOfItems;
var total = 75;
$('.items').on('change', function() {
var get = $('#items option:selected').val();
alert(get);
if (get === '1') {
numOfItems = 50; // random values
} else if (get === '2') {
numOfItems = 10;
} else if (get === "3") {
numOfItems = 20;
}
$('#new_text').html(total + numOfItems + " USD");
});
这就是我要设计的样式(略有变化):
<div class="col-xs-12 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2">
<label class="select-label">Number of items (max 3):</label>
<select class="items cs-select cs-skin-rotate" id="items" name="option">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
结果如下:
感谢任何帮助!这是我的代码的另一半 (HTML)，如果您需要查看链接的 CSS 文件，我很乐意发布它们:
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-rotate.css" />
这是我要更新的部分:
<h2 style="margin-top: 40px;">Total amount $<span id="new_text">35 USD</span></h2>
更新**
cs-select.css:
/* Default custom select styles */
div.cs-select {
display: inline-block;
vertical-align: middle;
position: relative;
text-align: left;
background: #fff;
z-index: 100;
width: 100%;
max-width: 500px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.cs-select:focus {
outline: none; /* For better accessibility add a style for this in your skin */
}
.cs-select select {
display: none;
}
.cs-select span {
display: block;
position: relative;
cursor: pointer;
padding: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Placeholder and selected option */
.cs-select > span {
padding-right: 3em;
}
.cs-select > span::after,
.cs-select .cs-selected span::after {
speak: none;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cs-select > span::after {
content: '\25BE';
right: 1em;
}
.cs-select .cs-selected span::after {
content: '\2713';
margin-left: 1em;
}
.cs-select.cs-active > span::after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
div.cs-active {
z-index: 200;
}
/* Options */
.cs-select .cs-options {
position: absolute;
overflow: hidden;
width: 100%;
background: #fff;
visibility: hidden;
}
.cs-select.cs-active .cs-options {
visibility: visible;
}
.cs-select ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.cs-select ul span {
padding: 1em;
}
.cs-select ul li.cs-focus span {
background-color: #ddd;
}
/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
padding-left: 1em;
}
.cs-select li.cs-optgroup > span {
cursor: default;
}
cs-skin-rotate.css:
div.cs-skin-rotate {
background: transparent;
font-size: 1.5em;
font-weight: 700;
width: 300px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
@media screen and (max-width: 30em) {
div.cs-skin-rotate { font-size: 1em; width: 200px; }
}
.cs-skin-rotate > span,
.cs-skin-rotate .cs-options li {
background: transparent;
-webkit-transform-origin: 50% 50% -200px;
transform-origin: 50% 50% -200px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
@media screen and (max-width: 30em) {
.cs-skin-rotate > span,
.cs-skin-rotate .cs-options li {
-webkit-transform-origin: 50% 50% -100px;
transform-origin: 50% 50% -100px;
}
}
.cs-skin-rotate > span {
border: 1px dashed #c0c6c4;
}
.cs-skin-rotate.cs-active > span {
opacity: 0;
-webkit-transform: rotate3d(0,1,0,-90deg);
transform: rotate3d(0,1,0,-90deg);
}
.cs-skin-rotate > span::after,
.cs-skin-rotate .cs-selected span::after {
font-family: 'icomoon';
}
.cs-skin-rotate > span::after,
.cs-skin-rotate.cs-active > span::after {
content: '\e012';
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,-90deg);
transform: translate3d(0,-50%,0) rotate3d(0,0,1,-90deg);
}
.cs-skin-rotate ul span::after {
content: '';
opacity: 0;
}
.cs-skin-rotate .cs-selected span::after {
content: '\e00e';
font-size: 1.5em;
opacity: 0.5;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.cs-skin-rotate .cs-options {
background: transparent;
top: 0;
overflow: visible;
visibility: visible;
pointer-events: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cs-skin-rotate .cs-options ul {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cs-skin-rotate .cs-options li {
opacity: 0;
-webkit-transform: rotate3d(0,1,0,90deg);
transform: rotate3d(0,1,0,90deg);
}
.cs-skin-rotate.cs-active .cs-options li {
opacity: 1;
-webkit-transform: rotate3d(0,1,0,0deg);
transform: rotate3d(0,1,0,0deg);
pointer-events: auto;
}
.cs-skin-rotate .cs-options li:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.cs-skin-rotate .cs-options li:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.cs-skin-rotate .cs-options li:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.cs-skin-rotate .cs-options li:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.cs-skin-rotate.cs-active .cs-options ul li {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.cs-skin-rotate .cs-options li span {
padding: 1em 0;
}
.cs-skin-rotate .cs-options li span:hover,
.cs-skin-rotate .cs-options li.cs-focus span,
.cs-skin-rotate .cs-selected span {
opacity: 0.8;
background: transparent;
}
selectFx.js:
;( function( window ) {
'use strict';
/**
* based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
*/
function hasParent( e, p ) {
if (!e) return false;
var el = e.target||e.srcElement||e||false;
while (el && el != p) {
el = el.parentNode||false;
}
return (el!==false);
};
/**
* extend obj function
*/
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
/**
* SelectFx function
*/
function SelectFx( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
/**
* SelectFx options
*/
SelectFx.prototype.options = {
// if true all the links will open in a new tab.
// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select element
newTab : true,
// when opening the select element, the default placeholder (if any) is shown
stickyPlaceholder : true,
// callback when changing the value
onChange : function( val ) { return false; }
}
/**
* init function
* initialize and cache some vars
*/
SelectFx.prototype._init = function() {
// check if we are using a placeholder for the native select box
// we assume the placeholder is disabled and selected by default
var selectedOpt = this.el.querySelector( 'option[selected]' );
this.hasDefaultPlaceholder = selectedOpt && selectedOpt.disabled;
// get selected option (either the first option with attr selected or just the first option)
this.selectedOpt = selectedOpt || this.el.querySelector( 'option' );
// create structure
this._createSelectEl();
// all options
this.selOpts = [].slice.call( this.selEl.querySelectorAll( 'li[data-option]' ) );
// total options
this.selOptsCount = this.selOpts.length;
// current index
this.current = this.selOpts.indexOf( this.selEl.querySelector( 'li.cs-selected' ) ) || -1;
// placeholder elem
this.selPlaceholder = this.selEl.querySelector( 'span.cs-placeholder' );
// init events
this._initEvents();
}
/**
* creates the structure for the select element
*/
SelectFx.prototype._createSelectEl = function() {
var self = this, options = '', createOptionHTML = function(el) {
var optclass = '', classes = '', link = '';
if( el.selectedOpt && !this.foundSelected && !this.hasDefaultPlaceholder ) {
classes += 'cs-selected ';
this.foundSelected = true;
}
// extra classes
if( el.getAttribute( 'data-class' ) ) {
classes += el.getAttribute( 'data-class' );
}
// link options
if( el.getAttribute( 'data-link' ) ) {
link = 'data-link=' + el.getAttribute( 'data-link' );
}
if( classes !== '' ) {
optclass = 'class="' + classes + '" ';
}
return '<li ' + optclass + link + ' data-option data-value="' + el.value + '"><span>' + el.textContent + '</span></li>';
};
[].slice.call( this.el.children ).forEach( function(el) {
if( el.disabled ) { return; }
var tag = el.tagName.toLowerCase();
if( tag === 'option' ) {
options += createOptionHTML(el);
}
else if( tag === 'optgroup' ) {
options += '<li class="cs-optgroup"><span>' + el.label + '</span><ul>';
[].slice.call( el.children ).forEach( function(opt) {
options += createOptionHTML(opt);
} );
options += '</ul></li>';
}
} );
var opts_el = '<div class="cs-options"><ul>' + options + '</ul></div>';
this.selEl = document.createElement( 'div' );
this.selEl.className = this.el.className;
this.selEl.tabIndex = this.el.tabIndex;
this.selEl.innerHTML = '<span class="cs-placeholder">' + this.selectedOpt.textContent + '</span>' + opts_el;
this.el.parentNode.appendChild( this.selEl );
this.selEl.appendChild( this.el );
}
/**
* initialize the events
*/
SelectFx.prototype._initEvents = function() {
var self = this;
// open/close select
this.selPlaceholder.addEventListener( 'click', function() {
self._toggleSelect();
} );
// clicking the options
this.selOpts.forEach( function(opt, idx) {
opt.addEventListener( 'click', function() {
self.current = idx;
self._changeOption();
// close select elem
self._toggleSelect();
} );
} );
// close the select element if the target it´s not the select element or one of its descendants..
document.addEventListener( 'click', function(ev) {
var target = ev.target;
if( self._isOpen() && target !== self.selEl && !hasParent( target, self.selEl ) ) {
self._toggleSelect();
}
} );
// keyboard navigation events
this.selEl.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
// up key
case 38:
ev.preventDefault();
self._navigateOpts('prev');
break;
// down key
case 40:
ev.preventDefault();
self._navigateOpts('next');
break;
// space key
case 32:
ev.preventDefault();
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
self._changeOption();
}
self._toggleSelect();
break;
// enter key
case 13:
ev.preventDefault();
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
self._changeOption();
self._toggleSelect();
}
break;
// esc key
case 27:
ev.preventDefault();
if( self._isOpen() ) {
self._toggleSelect();
}
break;
}
} );
}
/**
* navigate with up/dpwn keys
*/
SelectFx.prototype._navigateOpts = function(dir) {
if( !this._isOpen() ) {
this._toggleSelect();
}
var tmpcurrent = typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;
if( dir === 'prev' && tmpcurrent > 0 || dir === 'next' && tmpcurrent < this.selOptsCount - 1 ) {
// save pre selected current - if we click on option, or press enter, or press space this is going to be the index of the current option
this.preSelCurrent = dir === 'next' ? tmpcurrent + 1 : tmpcurrent - 1;
// remove focus class if any..
this._removeFocus();
// add class focus - track which option we are navigating
classie.add( this.selOpts[this.preSelCurrent], 'cs-focus' );
}
}
/**
* open/close select
* when opened show the default placeholder if any
*/
SelectFx.prototype._toggleSelect = function() {
// remove focus class if any..
this._removeFocus();
if( this._isOpen() ) {
if( this.current !== -1 ) {
// update placeholder text
this.selPlaceholder.textContent = this.selOpts[ this.current ].textContent;
}
classie.remove( this.selEl, 'cs-active' );
}
else {
if( this.hasDefaultPlaceholder && this.options.stickyPlaceholder ) {
// everytime we open we wanna see the default placeholder text
this.selPlaceholder.textContent = this.selectedOpt.textContent;
}
classie.add( this.selEl, 'cs-active' );
}
}
/**
* change option - the new value is set
*/
SelectFx.prototype._changeOption = function() {
// if pre selected current (if we navigate with the keyboard)...
if( typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ) {
this.current = this.preSelCurrent;
this.preSelCurrent = -1;
}
// current option
var opt = this.selOpts[ this.current ];
// update current selected value
this.selPlaceholder.textContent = opt.textContent;
// change native select element´s value
this.el.value = opt.getAttribute( 'data-value' );
// remove class cs-selected from old selected option and add it to current selected option
var oldOpt = this.selEl.querySelector( 'li.cs-selected' );
if( oldOpt ) {
classie.remove( oldOpt, 'cs-selected' );
}
classie.add( opt, 'cs-selected' );
// if there´s a link defined
if( opt.getAttribute( 'data-link' ) ) {
// open in new tab?
if( this.options.newTab ) {
window.open( opt.getAttribute( 'data-link' ), '_blank' );
}
else {
window.location = opt.getAttribute( 'data-link' );
}
}
// callback
this.options.onChange( this.el.value );
}
/**
* returns true if select element is opened
*/
SelectFx.prototype._isOpen = function(opt) {
return classie.has( this.selEl, 'cs-active' );
}
/**
* removes the focus class from the option
*/
SelectFx.prototype._removeFocus = function(opt) {
var focusEl = this.selEl.querySelector( 'li.cs-focus' )
if( focusEl ) {
classie.remove( focusEl, 'cs-focus' );
}
}
/**
* add to global namespace
*/
window.SelectFx = SelectFx;
} )( window );
最后，classie.js:
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
最佳答案
基于您使用过的选择类。一个简单的谷歌搜索给出了这个 SelectInspiration ，正如我的同行在评论中指出的那样，这个插件改变了选择小部件的外观(我应该添加一个好的小部件)。
不用担心，开发人员已经使插件可定制。根据演示文件，可以捕获更改事件并用您需要的更改覆盖它。
我假设您的 HTML 中有类似的内容
document.querySelectorAll('select.cs-select')).forEach(function (el) {
new SelectFx(el);
}
现在，如果我们深入研究开发人员包含的自定义 js 文件。你可以看到
`
/**SelectFx function*/
function SelectFx( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}`
` /**
* SelectFx options
*/
SelectFx.prototype.options = {
// if true all the links will open in a new tab.
// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select element
newTab : true,
// when opening the select element, the default placeholder (if any) is shown
stickyPlaceholder : true,
// callback when changing the value
onChange : function( val ) { return false; }
}`
记住这一点，你就可以
function changelogic(val) {
console.log("Your logic")
console.log(val);
}
document.querySelectorAll('select.cs-select')).forEach(function (el) {
new SelectFx(el, {onChange: changelogic});
};
这应该会让您感到舒适，而不需要做太多改变
关于javascript - 用户选择选项未使用 jQuery 更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46363509/