个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
24
4
我有一个电子商务网站，其产品具有多种属性(例如尺寸、颜色等)
在每个产品页面上，每个属性都有一个下拉列表，其类别为 'attribute_price'。
我还使用类 'hidden_attribute_value' 将每个产品的定价从我的数据库预加载到页面上。
因此，并非所有尺寸和颜色的组合都是一种选择。例如，我们可能有 'small_red' 或 'medium_red' 但没有 'large_red'
因此，如果他们从尺寸下拉菜单中选择 'large'，则 'red' 不应作为颜色选项。
我目前拥有的是:
$("select.attribute_price").on("change", function(){
var id = event.target.id;
// determine which dropdown was changed (size or colour)
var attribute_value = document.getElementById(id).value+'_';
// get the value of the dropdown that they selected
var other_attribute_ids = []
var i;
var other_attributes = document.getElementsByClassName("attribute_price");
for(i=0; i<other_attributes.length; i++){
if(other_attributes[i].id != id){
var other_attribute_id = document.getElementById(other_attributes[i].id).id;
other_attribute_ids.push(other_attribute_id);
}
}
// create an array of all of the other dropdown ids excluding the one they changed
var all_attribute_ids = []
var i;
var all_attributes = document.getElementsByClassName("hidden_attribute_value");
for(i=0; i<all_attributes.length; i++){
all_attribute_ids.push(all_attributes[i].id);
}
// create an array of all of the possible values that it can be
});
所以我有一个变量 'attribute_value'，它类似于 'red_' 或 'blue_'。
我有一个名为 'all_attribute_values' 的数组，其中包含所有可能组合的隐藏输入的 ID。这些将具有诸如“small_red_”或“small_blue”之类的值。
我有一个名为 'other_attribute_ids' 的数组，其中包含尚未选择的其他下拉菜单的 ID。
因此，如果 'all_attribute_values' 中的项目不包含 'attribute_value'，请从 'other_attribute_ids' 中删除该选项。
最佳答案
我已经根据您的用例创建了一个示例 html。解决方案也是如此，但是您应该从解决您的问题中获得灵感。
我考虑了独立的属性，因此解决方案将扩展到具有不同值的新属性。我还考虑过服务器响应是不可编辑的。
我在 jsfiddle 中有一个快速链接来检查解决方案
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<select id="size" class="attribute_price">
<option value="small">Small</option>
<option value="large">Large</option>
</select>
<select id="color" class="attribute_price">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<select id="pattern" class="attribute_price">
<option value="solids">Solids</option>
<option value="checked">Checked</option>
<option value="dots">Dots</option>
</select>
<input type="hidden" id="small_red_solids" class="hidden_attribute_value">
<input type="hidden" id="small_black_dots" class="hidden_attribute_value">
<input type="hidden" id="large_green_checked" class="hidden_attribute_value">
<script>
// on page load
$( document ).ready(function() {
renderOptions();
});
$("select.attribute_price").on("change", function () {
renderOptions();
});
function renderOptions() {
// create an array of all of the possible values that it can be
// allowed_attribute_values = ['small_red', 'large_blue']
var allowed_attribute_values = [];
var all_attributes = document.getElementsByClassName("hidden_attribute_value");
for (var i = 0; i < all_attributes.length; i++) {
allowed_attribute_values.push(all_attributes[i].id);
}
function getAllPossibleValues(current_level, all_attributes) {
var depth_index = all_attributes.length;
var selected_combination = '';
for (var i = 0; i < depth_index; i++) {
if (i <= current_level) {
selected_combination += all_attributes[i].value;
if (i != all_attributes.length - 1) {
selected_combination += '_';
}
}
}
// hide all lower options
for (var i = current_level + 1; i < depth_index; i++) {
var selectedIdOptions = all_attributes[i].options;
all_attributes[i].value = null
for (var j = 0; j < selectedIdOptions.length; j++) {
// hide all lower options
selectedIdOptions[j].hidden = true;
var el = allowed_attribute_values.find(a => a.includes(selected_combination + selectedIdOptions[j].value));
if (el) {
selectedIdOptions[j].hidden = false;
}
}
}
}
if (event) {
var id = event.target.id;
} else {
var id = document.getElementsByClassName("attribute_price")[0].id;
}
var other_attributes = document.getElementsByClassName("attribute_price");
for (var i = 0; i < other_attributes.length; i++) {
if (other_attributes[i].id == id) {
allPossibleValues = getAllPossibleValues(i, other_attributes);
// we dont want to go deeper as of now
break;
}
}
}
</script>
关于javascript - 根据先前的下拉选择更新下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52595129/
24
4
0
我的应用将 SceneKit 内容的“页面”与图像和文本交替。当我从图像页面前进到新的 SceneKit 页面时，前一个 SceneKit 页面中的内容会短暂显示，然后被新内容替换。时髦。 我只使用一
我正在尝试处理(在 C# 中)包含一些数字数据的大型数据文件。给定一个整数数组，如何对其进行拆分/分组，以便如果下一个 n(两个或更多)是负数，则前一个 n 元素被分组。例如，在下面的数组中，应该使用
刚接触promises，研究过。所以我的代码和我的理解: sql.connect(config).then(function(connection) { return connection.req
目前我在 if (roobaf) block 中有一些代码，这取决于 foo 和 bar 是否为假。我可以在 block 内再次检查这些条件，但感觉像是不必要的代码重复。 if (foo) {
我是一名优秀的程序员,十分优秀！