javascript - 将值从选择框传递到外部 main.js 文件
问题描述
我正在使用漂亮的下拉菜单和添加到购物车的交互插件。pretty-dropdowns 采用默认选择框并使其漂亮，但它通过自己分配 ul 和 li 标签来做到这一点，包括它们的 ID（或者我错了？）
add-to-cart-interaction 是，你可能已经猜到了 - 一个用 CSS 和 JS 编写的插件，可以添加到购物车。
我想从漂亮的选择框中获取值并将它们添加到购物车。
我无法做到这一点，因为我不知道如何从漂亮的选择框中获取值。当我尝试从“OG”选择框中检索时，它只给了我默认值：“请选择”。
这是代码：
HTML（常规选择框 - 在它们变得漂亮之前）：
<select name="parent_selection" autocomplete="off" id="parent_selection">
<option value="">Please Select</option>
<option value="universal">Universal Premium</option>
<option value="adapter">Scheibenwischer Adapters</option>
<option value="excellence">Excellence Premium</option>
<option value="hybrid">Hybrid Symbio</option>
<option value="revf">Re-View F</option>
<option value="revg">Re-View G</option>
</select>
<select name="child_selection" id="child_selection">
<option value="">Choose Wiper Line First</option>
</select>
<input id="mengescheiben" type="number" maxlength="4" max="4" placeholder="Menge" style="text-align: center; position: relative; width: 5em; height:auto;; font: normal 18px Calibri, sans-serif; font-size:30px;" />
<p id="note" style="color: red"></p>
<p id="note-special" style="color: red"></p>
添加到购物车插件的 HTML（这并不重要，因为它在右下角创建了一个小型交互式购物车：
<div class="cd-cart cd-cart--empty js-cd-cart">
<a href="#0" class="cd-cart__trigger text-replace">
<ul class="cd-cart__count"> <!-- cart items count -->
<li>0</li>
<li>0</li>
</ul> <!-- .cd-cart__count -->
</a>
<div class="cd-cart__content">
<div class="cd-cart__layout">
<header class="cd-cart__header">
<h2>Cart</h2>
<span class="cd-cart__undo">Item removed. <a href="#0">Undo</a></span>
</header>
<div class="cd-cart__body">
<ul>
<!-- products added to the cart will be inserted here using JavaScript -->
</ul>
</div>
<footer class="cd-cart__footer">
<a href="#0" class="cd-cart__checkout">
<em>Checkout - $<span>0</span>
<svg class="icon icon--sm" viewBox="0 0 24 24"><g fill="none" stroke="currentColor"><line stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="3" y1="12" x2="21" y2="12"/><polyline stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="15,6 21,12 15,18 "/></g>
</svg>
</em>
</a>
</footer>
</div>
</div> <!-- .cd-cart__content -->
</div> <!-- cd-cart -->
有趣的部分来了。我将尝试分解并尽可能多地解释：
$(document).ready(function(){
$parentDrop = $('#parent_selection').prettyDropdown({
classic: true, height: 80
});
});
</script>
这是启动漂亮下拉菜单并在我之前创建的 OG 选择框上添加一些内容的地方。
继续我为选择框创建列表的位置：
<script>
$(document).ready(function(){
//let's create arrays
var excellence = [
{display: "14″ 350mm", value: "14" },
{display: "16″ 380mm", value: "16" },
{display: "18″ 450mm", value: "18" },
{display: "19″ 480mm", value: "19" },
{display: "20″ 500mm", value: "20" },
{display: "21″ 530mm", value: "21" },
{display: "22″ 550mm", value: "22" },
{display: "24″ 600mm", value: "24" },
{display: "26″ 650mm", value: "26" },
{display: "28″ 700mm", value: "28" }];
var hybrid = [
{display: "14″ 350mm", value: "14" },
{display: "16″ 380mm", value: "16" },
{display: "18″ 450mm", value: "18" },
{display: "19″ 480mm", value: "19" },
{display: "20″ 500mm", value: "20" },
{display: "21″ 530mm", value: "21" },
{display: "22″ 550mm", value: "22" },
{display: "24″ 600mm", value: "24" },
{display: "26″ 650mm", value: "26" }];
var universal = [
{display: "12″ 300mm", value: "12" },
{display: "14″ 350mm", value: "14" },
{display: "15″ 380mm", value: "15" },
{display: "16″ 400mm", value: "16" },
{display: "17″ 430mm", value: "17" },
{display: "18″ 450mm", value: "18" },
{display: "19″ 480mm", value: "19" },
{display: "20″ 500mm", value: "20" },
{display: "21″ 530mm", value: "21" },
{display: "22″ 550mm", value: "22" },
{display: "23″ 580mm", value: "23" },
{display: "24″ 600mm", value: "24" },
{display: "25″ 630mm", value: "25" },
{display: "26″ 650mm", value: "26" },
{display: "27″ 680mm", value: "27" },
{display: "28″ 700mm", value: "28" },
{display: "29″ 730mm", value: "29" },
{display: "30″ 750mm", value: "30" },
{display: "32″ 800mm", value: "32" }];
var adapter = [
{display: "A", value: "A" },
{display: "B1", value: "B1" },
{display: "B2", value: "B2" },
{display: "B3", value: "B3" },
{display: "B4", value: "B4" },
{display: "B5", value: "B5" },
{display: "B7", value: "B7" },
{display: "B8", value: "B8" },
{display: "C", value: "C" },
{display: "D", value: "D" },
{display: "E", value: "E" },
{display: "F", value: "F" },
{display: "H", value: "H" }];
var revf = [
{display: "10″ 250mm", value: "10" },
{display: "11″ 280mm", value: "11" },
{display: "12″ 300mm", value: "12" },
{display: "13″ 330mm", value: "13" },
{display: "14″ 350mm", value: "14" },
{display: "15″ 380mm", value: "15" },
{display: "16″ 400mm", value: "16" },
{display: "17″ 430mm", value: "17" }];
var revg = [
{display: "9″ 230mm", value: "9" },
{display: "10″ 250mm", value: "10" },
{display: "11″ 280mm", value: "11" },
{display: "12″ 300mm", value: "12" },
{display: "13″ 330mm", value: "13" },
{display: "14″ 350mm", value: "14" },
{display: "15″ 380mm", value: "14" },
{display: "16″ 400mm", value: "16" }];
转到所有逻辑所在的部分（如果用户选择这个 - 呈现这个列表，然后继续）并填充 2 个选择框：
$parentDrop.change(function() {
$('#note-special').html("");
$childDrop = $('#child_selection').prettyDropdown({
classic: true, height: 80
});
$childDrop.show();
var $schparent = $(this).val(); //get option value from parent
switch($schparent){ //using switch compare selected option and populate child
case 'excellence':
list(excellence);
$('#note').html("* 1 STK.");
break;
case 'hybrid':
list(hybrid);
break;
case 'universal':
list(universal);
$('#note').html("* Auf jeden Wish Universal Premium Scheibenwischer ist ein A Adapter schon vormoniert");
$('#note-special').html("* 1 STK.");
break;
case 'adapter':
list(adapter);
$('#note').html("* 1 STK.");
break;
case 'revf':
list(revf);
$('#note').html("* 1 STK.");
break;
case 'revg':
list(revg);
$('#note').html("* 1 STK.");
break;
default: //default child option is blank
$childDrop.html('""');
$('#note').html("");
$('#note-special').html("");
$childDrop.hide();
$('#mengescheiben').hide();
break;
}
$parentDrop.refresh();
$childDrop.refresh();
//function to populate child select box
function list(array_list)
{
$childDrop.html("Choose Wiper Line First"); //reset child options
$(array_list).each(function (i) { //populate child options
$childDrop.append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
$childDrop.refresh();
$('#mengescheiben').show('slow');
}
});
});
最后 - 添加到购物车插件的 main.js（本节后的完整说明）：
(function(){
// Add to Cart Interaction - by CodyHouse.co
var cart = document.getElementsByClassName('js-cd-cart');
if(cart.length > 0) {
var cartAddBtns = document.getElementsByClassName('js-cd-add-to-cart'),
cartBody = cart[0].getElementsByClassName('cd-cart__body')[0],
cartList = cartBody.getElementsByTagName('ul')[0],
cartListItems = cartList.getElementsByClassName('cd-cart__product'),
cartTotal = cart[0].getElementsByClassName('cd-cart__checkout')[0].getElementsByTagName('span')[0],
cartCount = cart[0].getElementsByClassName('cd-cart__count')[0],
cartCountItems = cartCount.getElementsByTagName('li'),
cartUndo = cart[0].getElementsByClassName('cd-cart__undo')[0],
productId = 0, //this is a placeholder -> use your real product ids instead
cartTimeoutId = false,
animatingQuantity = false;
initCartEvents();
function initCartEvents() {
// add products to cart
for(var i = 0; i < cartAddBtns.length; i++) {(function(i){
cartAddBtns[i].addEventListener('click', addToCart);
})(i);}
// open/close cart
cart[0].getElementsByClassName('cd-cart__trigger')[0].addEventListener('click', function(event){
event.preventDefault();
toggleCart();
});
cart[0].addEventListener('click', function(event) {
if(event.target == cart[0]) { // close cart when clicking on bg layer
toggleCart(true);
} else if (event.target.closest('.cd-cart__delete-item')) { // remove product from cart
event.preventDefault();
removeProduct(event.target.closest('.cd-cart__product'));
}
});
// update product quantity inside cart
cart[0].addEventListener('change', function(event) {
if(event.target.tagName.toLowerCase() == 'select') quickUpdateCart();
});
//reinsert product deleted from the cart
cartUndo.addEventListener('click', function(event) {
if(event.target.tagName.toLowerCase() == 'a') {
event.preventDefault();
if(cartTimeoutId) clearInterval(cartTimeoutId);
// reinsert deleted product
var deletedProduct = cartList.getElementsByClassName('cd-cart__product--deleted')[0];
Util.addClass(deletedProduct, 'cd-cart__product--undo');
deletedProduct.addEventListener('animationend', function cb(){
deletedProduct.removeEventListener('animationend', cb);
Util.removeClass(deletedProduct, 'cd-cart__product--deleted cd-cart__product--undo');
deletedProduct.removeAttribute('style');
quickUpdateCart();
});
Util.removeClass(cartUndo, 'cd-cart__undo--visible');
}
});
};
function addToCart(event) {
event.preventDefault();
if(animatingQuantity) return;
var cartIsEmpty = Util.hasClass(cart[0], 'cd-cart--empty');
//update cart product list
addProduct(this);
//update number of items
updateCartCount(cartIsEmpty);
//update total price
updateCartTotal(this.getAttribute('data-price'), true);
//show cart
Util.removeClass(cart[0], 'cd-cart--empty');
};
function toggleCart(bool) { // toggle cart visibility
var cartIsOpen = ( typeof bool === 'undefined' ) ? Util.hasClass(cart[0], 'cd-cart--open') : bool;
if( cartIsOpen ) {
Util.removeClass(cart[0], 'cd-cart--open');
//reset undo
if(cartTimeoutId) clearInterval(cartTimeoutId);
Util.removeClass(cartUndo, 'cd-cart__undo--visible');
removePreviousProduct(); // if a product was deleted, remove it definitively from the cart
setTimeout(function(){
cartBody.scrollTop = 0;
//check if cart empty to hide it
if( Number(cartCountItems[0].innerText) == 0) Util.addClass(cart[0], 'cd-cart--empty');
}, 500);
} else {
Util.addClass(cart[0], 'cd-cart--open');
}
};
function addProduct(target) {
// this is just a product placeholder
// you should insert an item with the selected product info
// replace productId, productName, price and url with your real product info
// you should also check if the product was already in the cart -> if it is, just update the quantity
productId = productId + 1;
var productAdded = '<li class="cd-cart__product"><div class="cd-cart__image"><a href="#0"><img src="assets/img/product-preview.png" alt="placeholder"></a></div><div class="cd-cart__details"><h3 class="truncate"><a href="#0">Product Name</a></h3><span class="cd-cart__price">$25.99</span><div class="cd-cart__actions"><a href="#0" class="cd-cart__delete-item">Delete</a><div class="cd-cart__quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="cd-cart__select"><select class="reset" id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select><svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg></span></div></div></div></li>';
cartList.insertAdjacentHTML('beforeend', productAdded);
};
function removeProduct(product) {
if(cartTimeoutId) clearInterval(cartTimeoutId);
removePreviousProduct(); // prduct previously deleted -> definitively remove it from the cart
var topPosition = product.offsetTop,
productQuantity = Number(product.getElementsByTagName('select')[0].value),
productTotPrice = Number((product.getElementsByClassName('cd-cart__price')[0].innerText).replace('$', '')) * productQuantity;
product.style.top = topPosition+'px';
Util.addClass(product, 'cd-cart__product--deleted');
//update items count + total price
updateCartTotal(productTotPrice, false);
updateCartCount(true, -productQuantity);
Util.addClass(cartUndo, 'cd-cart__undo--visible');
//wait 8sec before completely remove the item
cartTimeoutId = setTimeout(function(){
Util.removeClass(cartUndo, 'cd-cart__undo--visible');
removePreviousProduct();
}, 8000);
};
function removePreviousProduct() { // definitively removed a product from the cart (undo not possible anymore)
var deletedProduct = cartList.getElementsByClassName('cd-cart__product--deleted');
if(deletedProduct.length > 0 ) deletedProduct[0].remove();
};
function updateCartCount(emptyCart, quantity) {
if( typeof quantity === 'undefined' ) {
var actual = Number(cartCountItems[0].innerText) + 1;
var next = actual + 1;
if( emptyCart ) {
cartCountItems[0].innerText = actual;
cartCountItems[1].innerText = next;
animatingQuantity = false;
} else {
Util.addClass(cartCount, 'cd-cart__count--update');
setTimeout(function() {
cartCountItems[0].innerText = actual;
}, 150);
setTimeout(function() {
Util.removeClass(cartCount, 'cd-cart__count--update');
}, 200);
setTimeout(function() {
cartCountItems[1].innerText = next;
animatingQuantity = false;
}, 230);
}
} else {
var actual = Number(cartCountItems[0].innerText) + quantity;
var next = actual + 1;
cartCountItems[0].innerText = actual;
cartCountItems[1].innerText = next;
animatingQuantity = false;
}
};
function updateCartTotal(price, bool) {
cartTotal.innerText = bool ? (Number(cartTotal.innerText) + Number(price)).toFixed(2) : (Number(cartTotal.innerText) - Number(price)).toFixed(2);
};
function quickUpdateCart() {
var quantity = 0;
var price = 0;
for(var i = 0; i < cartListItems.length; i++) {
if( !Util.hasClass(cartListItems[i], 'cd-cart__product--deleted') ) {
var singleQuantity = Number(cartListItems[i].getElementsByTagName('select')[0].value);
quantity = quantity + singleQuantity;
price = price + singleQuantity*Number((cartListItems[i].getElementsByClassName('cd-cart__price')[0].innerText).replace('$', ''));
}
}
cartTotal.innerText = price.toFixed(2);
cartCountItems[0].innerText = quantity;
cartCountItems[1].innerText = quantity+1;
};
}
})();
你可能会问自己为什么我添加了插件的 main.js。好吧，需要对其进行很多更改才能使其正常工作。我不知道如何使它工作。首先，我尝试使用变量，假设如果我在我的网站上加载“main.js”，它会让我像使用全局变量一样使用变量（我是初学者，我错了）。
在意识到它不起作用后，我尝试将main.js的所有代码添加到
$parentDrop.change(function() {
访问从 $(this).val()（选择框）获取值的 schparent 变量，该变量之前存储在 $parentDrop 中。
var $schparent = $(this).val(); //get option value from parent
它部分起作用了。我可以将正确的产品（按其名称）添加到购物车，但插件有问题，有时无法打开购物车。它甚至添加了两次或三次相同的东西，这让我恢复并从头开始。
这就是我存储旧选择框并启动漂亮下拉菜单的方式：
$parentDrop = $('#parent_selection').prettyDropdown({ classic: true, height: 80 });
上面也写了。
需要 parentDrop.refresh(); 每次选择框中的值更改时。
因此，从以上所有内容中，有人可以向我解释如何实现我的目标吗？总而言之，我只需要一种从那些漂亮的下拉列表中获取值的工作方式，这样我就可以开始操作添加到购物车功能。
解决方案
推荐阅读
- mongodb - Aws 文档数据库在查找查询中不使用 elemMatch 运算符中的索引？
- python - 根据它们的值组合熊猫数据框中的两列
- java - EV3 Lejos 蓝牙收发数据
- javascript - 我们如何更新 Firebase 云存储中的现有图像？
- python - 电报机器人创建调查（民意调查）
- php - 在产品名称旁边发送支付网关 woocommerce 产品描述
- javascript - 基于输入术语的文本突出显示异常
- jquery - 使用 Ajax 获取 Bootstrap 弹出框内容的最佳方法是什么？
- javascript - ajax请求时闪烁和淡出元素
- python - 如何在python中使用条件填充空行中的值