clone() is only running once - javascript

I'm trying to add multiple product categories when "Add product" is clicked. I want the new product select box to remove the previously selected product category. I have this working for the first time the button is clicked, but it won't work a second or third time. Thanks for taking a look.
JSFiddle
HTML
<div id="products">
<div id="product-row-1" class="row">
<div class="small-6 columns">
<select id="product-category-1" name="product-category-1" class="text">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>
<div class="small-6 columns">
<input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
</div>
</div>
</div>
<div class="center row">
<button id="add-product">Add item</button>
</div>
JS
$(document).ready(function(){
var num = 1;
$('#add-product').click(function(){
var selVal = $('#product-category-'+num+'').val();
var clone = $('#product-row-'+num+'').clone();
$('#products').append(clone);
num++;
clone.attr("id", '#product-row-'+num+'');
clone.find('select').attr("id", 'product-category-'+num+'').attr("name", 'product-category-'+num+'');
clone.find('input').attr("id", 'product-amount-'+num+'').attr("name", 'product-amount-'+num+'');
$('#product-category-'+num+'').find("option[value='"+selVal+"']").remove();
return false;
});
});


When you update the ID of the cloned row, you keep the hash
clone.attr("id", '#product-row-' + num);
you have to remove the hash, otherwise you set the ID with the hash
clone.attr("id", 'product-row-' + num);
$(document).ready(function() {
var num = 1;
$('#add-product').click(function() {
var selVal = $('#product-category-' + num + '').val();
var clone = $('#product-row-' + num + '').clone();
$('#products').append(clone);
num++;
clone.attr("id", 'product-row-' + num + '');
clone.find('select').attr("id", 'product-category-' + num + '').attr("name", 'product-category-' + num + '');
clone.find('input').attr("id", 'product-amount-' + num + '').attr("name", 'product-amount-' + num + '');
$('#product-category-' + num + '').find("option[value='" + selVal + "']").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="products">
<div id="product-row-1" class="row">
<div class="small-6 columns">
<select id="product-category-1" name="product-category-1" class="text">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>
<div class="small-6 columns">
<input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
</div>
</div>
</div>
<div class="center row">
<button id="add-product">Add item</button>
</div>

Related

how to clone div bassed select option

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<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>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>

The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

Jquery append div depend on select dropdown

I am trying to create this option here.. The user can choose how many rooms he wants.
When he selects I am appending with JQuery the number of rooms he choosed.
Then he can choose how many adults and children there will be in each room. But when he choose for children I want to append another choice (age of children) depend on how many children.
As you can see I can add the rooms but on children I get all the problems.
1.)When I am adding the number of children i can not make it append only on specific div. And children option is working only for the first one.
2.)I tried to hide children age boxes like the rooms but I can not make it work.
Any feedback on what am i doing wrong would be helpful.
Thanks
So this is my code
$(document).ready(function() {
//onchange of rooms-count
$('#search_rooms_select').change(function() {
var roomsSelected = $('#search_rooms_select option:selected').val();
var roomsDisplayed = $('[id^="room-"]:visible').length;
var roomsRendered = $('[id^="room-"]').length;
//if room count is greater than number displayed - add or show accordingly
if (roomsSelected > roomsDisplayed) {
for (var i = 1; i <= roomsSelected; i++) {
var r = $('#room-' + i);
if (r.length == 0) {
var clone = $('#room-1').clone(); //clone
clone.children(':first').text("Room: ");
//change ids appropriately
setNewID(clone, i);
clone.children('div').children('select').each(function() {
setNewID($(this), i);
});
$(clone).insertAfter($('#room-' + roomsRendered));
} else {
//if the room exists and is hidden
$(r).show();
}
}
} else {
//else if less than room count selected - hide
for (var i = ++roomsSelected; i <= roomsRendered; i++) {
$('#room-' + i).hide();
}
}
});
function setNewID(elem, i) {
oldID = elem.attr('id');
newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
elem.attr('id', newId);
}
$('[id^="children-"]').change(function() {
var kidsSelected = $('[id^="children-"] option:selected').val();
for (i = 1; i <= kidsSelected; i++) {
var htmlChildren = "<div class='col-xs-4 col-md-4 col-sm-4'><span class='labelselect'>Child 1</span><select class='form-control' id='childrenage" + i + "'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></div> ";
$(".childrendiv").append(htmlChildren);
}
var kidsDisplayed = $('[id^="childrenage-"]:visible').length;
var kidsRendered = $('[id^="childrenage-"]').length;
});
});
label {
font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='content' id='passengers-popover' style="width: 100%;">
<div class="col-xs-12">
<div class="col-xs-3">
<label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
</div>
<div class="col-xs-9">
<select name="" class="form-control" id="search_rooms_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-12 paddinglr labelform">
<div class="col-xs-4 col-md-4 col-sm-4 paddingright">
<label class="labelselect"></label>
</div>
<div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
<div class="col-xs-6 col-sm-6 col-md-6 paddingright">
<label>Adults</label>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 paddingright">
<label>Children(0-16)</label>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12" id="room-1">
<div class="col-xs-4 col-md-4">
<label>
Room:
</label>
</div>
<div class="col-xs-8 col-md-8 paddinglr">
<div class="col-xs-6 col-sm-6 col-md-6">
<select class="form-control" id='adults-1'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<select class="form-control" id='children-1'>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="childrendiv"> </div>
</div>
<div class="col-xs-12 no-padding">
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>

Select options on two different select box matching those of two different array values jquery

I am trying to generate HTML by joining content from two separate arrays of equal size. For each index in the arrays a pair of selects should be created. The first select would have elements from the first array and the second would have elements from the second array. In both selects, the current element should be selected.
I can create the first set of selects as demonstrated below, but I cannot figure out how to create the second set of selects.
var myArryNames = [
"John",
"jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
for (var j = 1; j < myArryValues.length; j++) {
var thisRow = $('.dropdown').last(".dropdown");
var newid = parseInt(thisRow.attr('divid')) + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).
find('select').each(function() {
$(this).attr('name', 'myDropdown[' + (newid - 1) + ']');
}).end().
find('option[value="' + myArryValues[j] + '"]').each(function() {
$(this).attr('selected', 'selected');
}).end();
thisRow.next('.dropdown').attr("divid", newid).attr("id", "bookTemplate-" + newid);
//$('select[id="bookTemplate-'+newid+'"]').val(myArryValues[j]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>
HTML OUTPUT SHOULD LOOK LIKE BELOW
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World" selected="selected">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John" selected="selected">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" selected="selected">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" selected="selected">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" >Javascript</option>
<option value="Jquery" selected="selected">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" >Jennifer</option>
<option value="Angel" selected="selected">Angel</option>
</select>
</div>

The code below is a modification to your code that I believe does what is wanted by using the "nth-child" selector in jQuery.
Added code to do this by value instead.
var myArryNames = [
"John",
"Jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
var thisRow = $('.dropdown').last(".dropdown");
// Copy the two new rows
for (var j = 0; j < myArryValues.length; j++) {
var row;
// If j is non-zero, we need a new row
if (j) {
var newid = parseInt(thisRow.attr('divid')) + 1;
row = thisRow.clone(true).insertAfter(thisRow);
row.find('.myDropdown').attr('name', 'myDropdown[' + (newid - 1) + ']');
}
else {
row = thisRow;
}
// Alternate 1: select the appropriate options by position. This find will return elements from both divs, but since we don't care what the data is, just the position it works correctly
//row.find('option:nth-child('+(j+1)+')').attr('selected', 'selected');
// Alternate 2: Select the appropriate options by setting the value on the select itself
//row.find('.myDropdown').val(myArryValues[j]);
//row.find('.myNames').val(myArryNames[j]);
// Alternate 3: Manually modify the "selected" attribute of the appropriate options.
row.find('.myDropdown option[value="'+myArryValues[j]+'"]').attr('selected', 'selected');
row.find('.myNames option[value="'+myArryNames[j]+'"]').attr('selected', 'selected');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>

How to disable appended input text box when checkbox is checked javascript

I want to disable the text box when the checkbox is checked for the appended text box. The hard coded text box is disabled when the checkbox is checked.
Run the code snippet to see the outcome or view the screenshots shown below.
Below is the main.js and main.html file
<!--main.js-->
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox()"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox() {
var checkElement = document.getElementById('venueTB');
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
<!--main.html-->
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
actual outcome
expected outcome

it's because document.getElementById('venueTB') returns the first element in the DOM with id="venueTB".
Try to add classes to all the checkboxes, and get them by calling
document.querySelectorAll('.class-name')
Another thing, in checkBox() function, i think it should be:
var checkDisabled = checkElement.disabled == true;
instead of:
var checkDisabled = checkElement.disabled = true;

The IDs must be unique. Because you have inline js functions you can change from:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
To:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
In this way you will pass:
the event object
this: the current DOM object
In this way your function can be:
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
The snippet:
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox(event, this)"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
if (obj.checked) {
checkElement.disabled = true;
checkElement.value = '-NO VENUE-';
} else {
checkElement.disabled = false;
checkElement.value = '';
}
}
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>

Need Help Applying filters, select, 2 option values vs 1, Javascript, HTML

I want to add an extra option value "9" to both Afghanistan and Albania. Example: SO when i apply filter Albania and 1 Pound, I get both both results: $41 and $22.
HTML:
<p>Filter: </p>
<select class="filterby">
<option value="L"><h5>Afghanistan</h5></option>
<option value="E"><h5>Albania</h5></option>
</select>
<p>Location: </p>
<select class="filterby">
<option value="1"><h5>1 Pound</h5></option>
<option value="2"><h5>2 Pound</h5></option>
</select>
<div id="FilterContainer">
<div class="E 1">$41</div>
<div class="E 2">$48</div>
<div class="L 1">$28</div>
<div class="L 2">$33</div>
<div class="9 1">$22</div>
<div class="9 2">$25</div>
</div>
JAVASCRIPT:
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#FilterContainer').hide();
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#FilterContainer").find("div").hide();
$('#FilterContainer').show();
$("div#FilterContainer").find("div." + filters).show();
});
}//]]>
</script>

i added attribute to the options of first select which we can consider that attribute as the second value you want to add :
<p>Filter: </p>
<select class="filterby" id="allCountries">
<option value="L" dataSec="8"><h5>Afghanistan</h5></option>
<option value="E" dataSec="9"><h5>Albania</h5></option>
</select>
<p>Location: </p>
<select class="filterby">
<option value="1"><h5>1 Pound</h5></option>
<option value="2"><h5>2 Pound</h5></option>
</select>
<div id="FilterContainer">
<div class="E 1">$41</div>
<div class="E 2">$48</div>
<div class="L 1">$28</div>
<div class="L 2">$33</div>
<div class="9 1">$22</div>
<div class="9 2">$25</div>
</div>
and js:
$('#FilterContainer').hide();
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
});
var secondVal = $("#allCountries option:selected").attr('dataSec');
$("div#FilterContainer").find("div").hide();
$('#FilterContainer').show();
$("div#FilterContainer").find("div." + filters.join('.')).show();
$("div#FilterContainer").find("div." + secondVal + "." + filters[1]).show();
});
demo here: https://jsfiddle.net/IA7medd/bwhrj68r/1/

Categories