[英]Why am I not able to select data properties from dropdown values?
I have 2 different dropdowns of Clothing types and colors.我有 2 个不同的服装类型下拉列表和 colors。 Once a type of clothing is picked from the first dropdown, JSON data populate the second dropdown by appending options based on the value of the first dropdown.一旦从第一个下拉列表中选择了一种类型的服装,JSON 数据就会通过基于第一个下拉列表的值附加选项来填充第二个下拉列表。
Once a value from second dropdown is selected I am trying to update the link href
attribute and image source with jQuery and unable to get the value producturl and image links from json.选择第二个下拉列表中的值后,我将尝试使用 jQuery 更新链接href
属性和图像源,并且无法从 json 获取值 producturl 和图像链接。
$(document).ready(function() { $('.js-clothing-selector').change(function() { var selectedClothing = $(this).val(); console.log('value: ', selectedClothing); $('.js-colors-selector').html('<option value="none">Select Colour</option>'); //Populate the second dropdown by appending options based on the first dropdown choice $.each(jsonDATA[selectedClothing].colors, function(key, value) { console.log('object: ', key, value); $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>'); }); }) $('.js-colors-selector').change(function() { var currentColor = $(this).val(); console.log(currentColor); //This is where the issue lies $('.js-color-link').attr('href', jsonDATA[currentColor.value.producturl]); $('.js-color-image').attr('src', currentColor.image); }) }); var jsonDATA = { "pants": { "colors": { "black": { "value": "black", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Black", "producturl": "https://google.ca" }, "white": { "value": "white", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "White", "producturl": "https://gmail.ca" }, "red": { "value": "red", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Red", "producturl": "https://yahoo.ca" } } }, "shirt": { "colors": { "grey": { "value": "grey", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Grey", "producturl": "https://google.ca" }, "blue": { "value": "blue", "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e", "name": "Blue", "producturl": "https://gmail.ca" } } }, "hoodie": { "colors": { "gold": { "value": "gold", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Gold", "producturl": "https://gmail.com" }, "yellow": { "value": "yellow", "image": "https://i.imgur.com/8bPtWIw.jpeg", "name": "Yellow", "producturl": "https://gmail.ca" }, "blue": { "value": "blue", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Blue", "producturl": "https://gmail.net" } } } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="flex"> <div class="w-1/2"> <div class="flex"> <div class="w-24"> <select name="clothing" id="clothing" class="js-clothing-selector"> <option selected value="none">Select Clothing Type</option> <option value="hoodie">Hoodie</option> <option value="pants">Pants</option> <option value="shirt">Shirt</option> </select> </div> <div class="w-24"> <select name="colors" id="colors" class="js-colors-selector"> <option selected value="none">Select Colour</option> </select> </div> </div> <div class="js-link-container"> <a href="" class="dib ar-link js-color-link">Buy Item</a> </div> </div> <div class="w-1/2 js-image-container"> <img class="db w-100 js-color-image" src="" alt="" /> </div> </div> </div>
I made several fixes to your data handling, starting with moving a variable outside the function so it was more accessible.我对您的数据处理进行了一些修复,首先将变量移到 function 之外,以便更易于访问。 This results in a more complete data package being stored.这会导致存储更完整的数据 package。 Then some of the property chains were faulty.然后一些财产链出现了故障。
There are many ways it could be done.有很多方法可以做到。
let selectedClothing; $(function() { $('.js-clothing-selector').change(function() { selectedClothing = jsonDATA[$(this).val()]; $('.js-colors-selector').html('<option value="none">Select Colour</option>'); //Populate the second dropdown by appending options based on the first dropdown choice $.each(selectedClothing.colors, function(key, value) { $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>'); }); }) $('.js-colors-selector').change(function() { const currentColor = $(this).val(); //This is where the issue lies $('.js-color-link').attr('href', selectedClothing.colors[currentColor].producturl); $('.js-color-image').attr('src', currentColor.image); }) }); const jsonDATA = { "pants": { "colors": { "black": { "value": "black", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Black", "producturl": "https://google.ca" }, "white": { "value": "white", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "White", "producturl": "https://gmail.ca" }, "red": { "value": "red", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Red", "producturl": "https://yahoo.ca" } } }, "shirt": { "colors": { "grey": { "value": "grey", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Grey", "producturl": "https://google.ca" }, "blue": { "value": "blue", "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e", "name": "Blue", "producturl": "https://gmail.ca" } } }, "hoodie": { "colors": { "gold": { "value": "gold", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Gold", "producturl": "https://gmail.com" }, "yellow": { "value": "yellow", "image": "https://i.imgur.com/8bPtWIw.jpeg", "name": "Yellow", "producturl": "https://gmail.ca" }, "blue": { "value": "blue", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Blue", "producturl": "https://gmail.net" } } } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="flex"> <div class="w-1/2"> <div class="flex"> <div class="w-24"> <select name="clothing" id="clothing" class="js-clothing-selector"> <option selected value="none">Select Clothing Type</option> <option value="hoodie">Hoodie</option> <option value="pants">Pants</option> <option value="shirt">Shirt</option> </select> </div> <div class="w-24"> <select name="colors" id="colors" class="js-colors-selector"> <option selected value="none">Select Colour</option> </select> </div> </div> <div class="js-link-container"> <a href="" class="dib ar-link js-color-link">Buy Item</a> </div> </div> <div class="w-1/2 js-image-container"> <img class="db w-100 js-color-image" src="" alt="" /> </div> </div> </div>
Made a few changes to your code, you can't access a nested object property just from a string value对您的代码进行了一些更改,您无法仅从字符串值访问嵌套的 object 属性
$(document).ready(function() {
var jsonDATA = {
"pants": {
"colors": {
"black": {
"value": "black",
"image": "https://i.imgur.com/HMcE1OH.jpeg",
"name": "Black",
"producturl": "https://google.ca"
},
"white": {
"value": "white",
"image": "https://i.imgur.com/MVvuxDA.jpeg",
"name": "White",
"producturl": "https://gmail.ca"
},
"red": {
"value": "red",
"image": "https://i.imgur.com/MVvuxDA.jpeg",
"name": "Red",
"producturl": "https://yahoo.ca"
}
}
},
"shirt": {
"colors": {
"grey": {
"value": "grey",
"image": "https://i.imgur.com/HMcE1OH.jpeg",
"name": "Grey",
"producturl": "https://google.ca"
},
"blue": {
"value": "blue",
"image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e",
"name": "Blue",
"producturl": "https://gmail.ca"
}
}
},
"hoodie": {
"colors": {
"gold": {
"value": "gold",
"image": "https://i.imgur.com/HMcE1OH.jpeg",
"name": "Gold",
"producturl": "https://gmail.com"
},
"yellow": {
"value": "yellow",
"image": "https://i.imgur.com/8bPtWIw.jpeg",
"name": "Yellow",
"producturl": "https://gmail.ca"
},
"blue": {
"value": "blue",
"image": "https://i.imgur.com/MVvuxDA.jpeg",
"name": "Blue",
"producturl": "https://gmail.net"
}
}
}
}
Removed the var
from selectedClothing
to make it global and you can access it in another function从selectedClothing
中删除了var
以使其成为全局变量,您可以在另一个 function 中访问它
$('.js-clothing-selector').change(function() {
selectedClothing = $(this).val();//removed var
//console.log('value: ', selectedClothing);
$('.js-colors-selector').html('<option value="none">Select Colour</option>');
//Populate the second dropdown by appending options based on the first dropdown choice
$.each(jsonDATA[selectedClothing].colors, function(key, value) {
//console.log('object: ', key, value);
$('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>');
});
})
Now you can use that variable and access a nested object like this jsonDATA[selectedClothing].colors[currentColor].producturl);
现在您可以使用该变量并访问嵌套的 object ,例如jsonDATA[selectedClothing].colors[currentColor].producturl);
$('.js-colors-selector').change(function() {
var currentColor = $(this).val();
//Fixed
$('.js-color-link').attr('href', jsonDATA[selectedClothing].colors[currentColor].producturl);
$('.js-color-image').attr('src', jsonDATA[selectedClothing].colors[currentColor].image);
})
});
Notice how your variables are inside brackets []
while other properties are not.请注意您的变量如何在括号[]
内,而其他属性则不在。 That's how you can access the values you need from a deeply nested object这就是您可以从深度嵌套的 object 访问所需值的方式
Edit: adding snippets编辑:添加片段
$(document).ready(function() { var jsonDATA = { "pants": { "colors": { "black": { "value": "black", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Black", "producturl": "https://google.ca" }, "white": { "value": "white", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "White", "producturl": "https://gmail.ca" }, "red": { "value": "red", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Red", "producturl": "https://yahoo.ca" } } }, "shirt": { "colors": { "grey": { "value": "grey", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Grey", "producturl": "https://google.ca" }, "blue": { "value": "blue", "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e", "name": "Blue", "producturl": "https://gmail.ca" } } }, "hoodie": { "colors": { "gold": { "value": "gold", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Gold", "producturl": "https://gmail.com" }, "yellow": { "value": "yellow", "image": "https://i.imgur.com/8bPtWIw.jpeg", "name": "Yellow", "producturl": "https://gmail.ca" }, "blue": { "value": "blue", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Blue", "producturl": "https://gmail.net" } } } } $('.js-clothing-selector').change(function() { selectedClothing = $(this).val(); //console.log('value: ', selectedClothing); $('.js-colors-selector').html('<option value="none">Select Colour</option>'); //Populate the second dropdown by appending options based on the first dropdown choice $.each(jsonDATA[selectedClothing].colors, function(key, value) { //console.log('object: ', key, value); $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>'); }); }) $('.js-colors-selector').change(function() { var currentColor = $(this).val(); //console.log(jsonDATA[selectedClothing].colors[currentColor].image); //console.log(); //Fixed $('.js-color-link').attr('href', jsonDATA[selectedClothing].colors[currentColor].producturl); $('.js-color-image').attr('src', jsonDATA[selectedClothing].colors[currentColor].image); }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="flex"> <div class="w-1/2"> <div class="flex"> <div class="w-24"> <select name="clothing" id="clothing" class="js-clothing-selector"> <option selected value="none">Select Clothing Type</option> <option value="hoodie">Hoodie</option> <option value="pants">Pants</option> <option value="shirt">Shirt</option> </select> </div> <div class="w-24"> <select name="colors" id="colors" class="js-colors-selector"> <option selected value="none">Select Colour</option> </select> </div> </div> <div class="js-link-container"> <a href="" class="dib ar-link js-color-link">Buy Item</a> </div> </div> <div class="w-1/2 js-image-container"> <img class="db w-100 js-color-image" src="" alt="" /> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.