The Goal:
Show which list item was selected in another div container
Sometimes you want text to dynamically change to show the user which element they selected. This tutorial uses jQuery to grab the content and place it into another div each time a list item is selected.
Requirements:
- HTML & CSS
- jQuery
Before
After
HTML
Add this to your HTML code.
This is where we’ll be getting the text data from regarding the list item selected
[cc lang=”html”]
[cc lang=”html”]
- Everything
- Stores
- Creative
- Amazon
[/cc]
This is the container where the text will change depending on the selected list item.
[cc lang=”html”]
Show me Everything
[/cc]
jQuery
Add this to your custom scripts. Make sure you have jQuery installed.
[cc lang=”javascript”]
jQuery(document).ready(function(){
jQuery(document).ready(function(){
jQuery(‘input[type=”file”]’).change(function(e){
var fileName = e.target.files[0].name;
$(“.the-file”).html(“” + fileName + ““);
});
});
[/cc]