I currently have an array that is populated by changing the value/option of many select fields. E.g. If two select fields are in the dom and the options selected are 2 & 3 then the array would look like this - Array [ "2", "3" ]
Each select has a data attribute data-ticketprice which I would like to bind to each of the option values. So I can get the sum of both of the numbers e.g.
data attribute = 100
Select option value = 5
Sum = 100 x 5;
HTML -
<select class="ticket-qty" data-ticketprice="280.88" name="34">
<option value="0">0 Tickets</option>
<option value="1">1 Ticket</option>
<option value="2">2 Tickets</option>
<option value="3">3 Tickets</option>
<option value="4">4 Tickets</option>
<option value="5">5 Tickets</option>
</select>
<select class="ticket-qty" data-ticketprice="390" name="39">
<option value="0">0 Tickets</option>
<option value="1">1 Ticket</option>
<option value="2">2 Tickets</option>
<option value="3">3 Tickets</option>
<option value="4">4 Tickets</option>
<option value="5">5 Tickets</option>
</select>
Current jQuery -
//When select is changed update value to array
$('select.ticket-qty').on('change', function (e) {
//Map the values for the array
var arr = $('select.ticket-qty').map(function(){
return this.value
}).get()
//This sums the all the select options (not what I want)
var total = 0;
for (var i = 0; i < arr.length; i++) {
total += arr[i] << 0;
}
console.log(total);
});
You need to fill the array you build with map() with the selected quantity multiplied by the cost per item, which you can retrieve from the data attribute. From there you can use reduce() to sum up all values in the array. Something like this:
$('select.ticket-qty').on('change', function(e) {
var arr = $('select.ticket-qty').map(function() {
var cost = $(this).data('ticketprice');
var qty = $(this).val();
return cost * qty;
}).get();
var total = arr.reduce((a, b) => a + b, 0);
console.log(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ticket-qty" data-ticketprice="280.88" name="34">
<option value="0">0 Tickets</option>
<option value="1">1 Ticket</option>
<option value="2">2 Tickets</option>
<option value="3">3 Tickets</option>
<option value="4">4 Tickets</option>
<option value="5">5 Tickets</option>
</select>
<select class="ticket-qty" data-ticketprice="390" name="39">
<option value="0">0 Tickets</option>
<option value="1">1 Ticket</option>
<option value="2">2 Tickets</option>
<option value="3">3 Tickets</option>
<option value="4">4 Tickets</option>
<option value="5">5 Tickets</option>
</select>
You should note that this can all be done in a single loop, however I am assuming you're building the array of individual totals for use elsewhere in your UI.
So how far I understand is, you want to multiply the selected value with the given data attribute on Select?
Here is sample code for getting Array of All selected values. And how to calculate the value you posted.
var array = [];
var i =0;
$('select.ticket-qty').on('change', function (e) {
// Get value of all selects in array.
$('select.ticket-qty').each(function(){
array[i] = $(this).val();
i++;
});
//calculate Sum ?
var data_attribute = $(this).data("ticketprice");
SelectedOptionValue = = $(this).val();
Sum = parseFloat(data_attribute)* parseInt(SelectedOptionValue);
});
Vanilla JS
const SELECTS = document.querySelectorAll('select.ticket-qty')
const LOG_SUM = e => {
const ticketPrice = e.target.getAttribute('data-ticketPrice')
const multiplier = e.target.value
const SUM = (+ticketPrice * +multiplier)
console.log(SUM)
}
SELECTS.forEach(select => {
select.addEventListener('change', e => {
LOG_SUM(e)
})
})
jQuery
$('select.ticket-qty').on('change', e => {
const ticketPrice = $(e.target).attr('data-ticketPrice')
const multiplier = e.target.value
const SUM = (+ticketPrice * +multiplier)
console.log(SUM)
});
Notice how i prepend the + operator to the ticketPrice & multiplier constants... this is because attr && value are returning Strings and the + operator converts numbers of type String into numbers of type Number
You can use some jQuery plugins to populate and reduce the select boxes.
(function($) {
$.reduce = function(arr, fn, initial) {
initial = typeof initial === 'undefined' ? 0 : initial;
$.each(arr, function(i, v) {
initial = fn(initial, v, i);
});
return initial;
};
$.fn.reduce = function(fn, initial) {
return $.reduce(this, fn, initial);
};
$.fn.populateCombo = function(opts) {
let data = opts.data || Array.apply(null, {length: opts.range || 0}).map(Number.call, Number);
return this.append(data.map(x => $('<option>')
.text(opts.textFn ? opts.textFn(x) : x)
.val(opts.valFn ? opts.valFn(x) : x)));
};
})(jQuery);
$('.ticket-qty').each((i, combo) => $(combo).populateCombo({
range : 6, textFn: v => v + ' Tickets'
}));
$('select.ticket-qty').on('change', function(e) {
var total = $('select.ticket-qty').reduce(function(result, item) {
return result + $(item).data('ticketprice') * $(item).val();
}, 0);
console.log('$' + total.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ticket-qty" data-ticketprice="280.88" name="34"></select>
<select class="ticket-qty" data-ticketprice="390" name="39"></select>
Related
I have some arrays defined in js, I want to use the variable's value from selected option to select which array should I select.
I tried using this:
//code HTML
<select id="bank">
<option value="ACB">ACB</option>
<option value="SCB">SCB</option>
</select>
<select id="month">
<option value="1">1 month</option>
<option value="2">2 month</option>
<option value="3">3 month</option>
</select>
<p id="demo"></p>
// JS
var ACB = ["1%", "2%", "3%"];
var SCB = ["4%", "5%", "6%"];
selectElement = document.querySelector('#bank');
var a = selectElement.value; // a = ACB
selectElement = document.querySelector('#month');
var b = selectElement.value; // b = 1
document.getElementById("demo").innerHTML = a[b]; // I was hoping result is "1%"
Any suggestions are appreciated!
Thanks so much!
According to your code, you would never get the expected result. Because you are taking a[b]. But here a value type would be string and when you use indexing on strings then you will get its char at that specific index.
You can achieve the expected result as
1) Create a dict which contains both ACB and SCB reference
const dict = { ACB, SCB };
2) You can get the array's value from dict as
p.textContent = dict[a][b - 1];
3) b index should start with zero, so to get the first result you should subtract -1 from b.
// JS
var ACB = ["1%", "2%", "3%"];
var SCB = ["4%", "5%", "6%"];
const dict = { ACB, SCB };
const bankEl = document.querySelector( '#bank' );
const monthEl = document.querySelector( '#month' );
const p = document.getElementById( "demo" );
const a = bankEl.value; // a = ACB
const b = monthEl.value; // b = 1
p.textContent = dict[a][b - 1]; // I was hoping result is "1%"
<select id="bank">
<option value="ACB">ACB</option>
<option value="SCB">SCB</option>
</select>
<select id="month">
<option value="1">1 month</option>
<option value="2">2 month</option>
<option value="3">3 month</option>
</select>
<h1 id="demo"></h1>
I added my html and js snippet however it still not completed. Sorry if the code is a bit messy this is my first attempt for me to build something like this on my own.
`
var selectBread = document.querySelectorAll(".bread-select");
var sauceSelect = document.querySelectorAll(".sauces-select");
var checkBoxes = document.getElementsByTagName("input");
var orderModal = document.getElementById("order-modal");
let chosenItem;
let chosenItemPrice;
var ingredients = [];
var ingredientsPrice = [];
let selectedItem;
var sideDishes = [];
var drink = [];
var toasted;
var currentSandwich = {};
var breadAndPrice = [
["baguette", 0.8],
["burger bun", 0.8],
["ciabatta", 0.9],
["focaccia", 1.5],
["ftira", 0.8],
["olive bread", 1.3],
["rye bread", 1.3],
["sliced bread", 0.9],
["tortilla", 1.6],
["wheat bread", 0.9],
["whole grain bread", 1.2]
];
var sauceAndPrice = [
["chili sauce", 0.25],
["garlic and olive oil", 0.35],
["ketchup", 0.15],
["mayonnaisee", 0.15],
["garlic basil mayo", 0.45],
["mustard", 0.25]
];
function getBreadInfo(el, currentOption) {
for (var i = 0; i < el.length; i++) {
//add event listener to all bread select menu options
el[i].addEventListener("change", function() {
selectedItem = event.target.value; //current selected item
getArrIndex(currentOption, selectedItem);
if (event.target.name === "bread-select") {
currentSandwich.breadType = chosenItem;
currentSandwich.breadPrice = chosenItemPrice;
} else if (event.target.name === "sauce-select") {
currentSandwich.sauce = chosenItem;
currentSandwich.saucePrice = chosenItemPrice;
} else if (event.target.name === "side-dishes-select") {
currentSandwich.sideDish = chosenItem;
currentSandwich.sideDishPrice = chosenItemPrice;
} else if (event.target.name === "drinks-select") {
currentSandwich.drinkSelect = chosenItem;
currentSandwich.drinkPrice = chosenItemPrice;
} else if (event.target.name === "toasted-select") {
currentSandwich.toasted = chosenItem;
}
});
}
}
function getArrIndex(arr, val) {
// val is the selected item
for (var i = 0; i < arr.length; i++) {
//iterate through the current choosen array
if (arr[i][0] === val) {
// when selected item is found in the array
chosenItem = arr[i][0]; // store the item in choosenItem value
chosenItemPrice = arr[i][1]; // store the item price in choosenItem value
}
}
}
getBreadInfo(selectBread, breadAndPrice);
getBreadInfo(sauceSelect, sauceAndPrice);
//get the index of the selected item from the bread and price array
function getIngredientsInfo() {
for (var i = 0; i < checkBoxes.length; i++) {
//loop check boxes
checkBoxes[i].addEventListener("change", function() {
//add event listener to check boxes
if (event.target.checked) {
//check if check boxes are checked
ingredients.push(event.target.name); //push the name of ingredient to ingredients array
ingredientsPrice.push(event.target.value); //get the price of the item checked from value attr and push it to ingredientsPrice array
} else if (event.target.checked === false) {
var index = ingredients.indexOf(event.target.name);
ingredients.splice(index, 1);
ingredientsPrice.splice(index, 1);
}
});
}
}
getIngredientsInfo();
<section class="order-section">
<h2 class="selection-header">Choose your...</h2>
<div class="select-container">
<select class="bread-select" name="bread-select">
<option selected disabled>Bread Type</option>
<option value="baguette">Baguette</option>
<option value="burger bun">Burger Bun</option>
<option value="ciabatta">Ciabatta</option>
<option value="focaccia">Focaccia</option>
<option value="ftira">Ftira</option>
<option value="olive bread">Olive Bread</option>
<option value="rye bread">Rye Bread</option>
<option value="sliced bread">Sliced Bread</option>
<option value="tortilla">Tortilla</option>
<option value="wheat bread">Wheat Bread</option>
<option value="whole grain bread">Whole Grain Bread</option>
</select>
<select class="sauces-select" name="sauce-select">
<option selected disabled>Sauces</option>
<option value="chili sauce">Chili Sauce</option>
<option value="garlic and olive oil">Garlic and Olive Oil</option>
<option value="ketchup">Ketchup</option>
<option value="mayonnaise">Mayonnaise</option>
<option value="garlic basil mayo">Garlic Basil Mayo</option>
<option value="mustard">Mustard</option>
</select>
<select class="side-dishes-select" name="side-dishes-select">
<option selected disabled>Side Dishes</option>
<option value="coleslaw">Coleslaw</option>
<option value="curly fries">Curly Fries</option>
<option value="mixed salad">Mixed Salad</option>
<option value="potato wedges">Potato Wedges</option>
<option value="potatoes salad">Potatoes Salad</option>
<option value="sliced Potatoes fries">Sliced Potatoes Fries</option>
<option value="sweet potatoes fries">Sweet Potatoes Fries</option>
</select>
<select class="drinks-select" name="drinks-select">
<option selected disabled>Drinks</option>
<option value="Still Water">Still Water</option>
<option value="Fizzy Water">Fizzy Water</option>
<option value="coca cola">Coca Cola</option>
<option value="sprite">Sprite</option>
<option value="fanta">Fanta</option>
<option value="kinnie">Kinnie</option>
<option value="cisk">Cisk</option>
</select>
<select class="toasted-select" name="toasted-select">
<option selected disabled>Toasted</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</section>
`I have a function which I am using to get data from select menus and I would like to save the data to an object by passing it as an argument. At the moment the only solution I found is to use if statements but it look bad. Any help to refactor this please?
if (event.target.name === "bread-select") {
currentSandwich.breadType = chosenItem;
currentSandwich.breadPrice = chosenItemPrice;
} else if (event.target.name === "sauce-select") {
currentSandwich.sauce = chosenItem;
currentSandwich.saucePrice = chosenItemPrice;
} else if (event.target.name === "side-dishes-select") {
currentSandwich.sideDish = chosenItem;
currentSandwich.sideDishPrice = chosenItemPrice;
} else if (event.target.name === "drinks-select") {
currentSandwich.drinkSelect = chosenItem;
currentSandwich.drinkPrice = chosenItemPrice;
} else if (event.target.name === "toasted-select") {
currentSandwich.toasted = chosenItem;
}
I'd suggest the switch is the way to go, it is both faster and better practice.
switch(event.target.name) {
case 'bread-select':
currentSandwich.breadType = chosenItem;
currentSandwich.breadPrice = chosenItemPrice;
break;
...
default:
}
Thanks
You can use a string to make a property assignment to and object using [] bracket notation. So if you are able to get a relevant property name, or part of a property name from your selects, that should work for you.
var selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].addEventListener('change', selectHandler);
}
var currentSandwich = {};
var prices = {
soda : .5,
tea : .5,
lemonade : 1,
water : 0,
corn : 2,
potatoes : 2.5,
carrots : 1.5
};
function selectHandler(evt){
var name = evt.target.name;
var selection = evt.target.value;
currentSandwich[name] = selection;
if(prices[selection]){
currentSandwich[name+"price"] = prices[selection];
}else{
currentSandwich[name+"price"] = 0;
}
console.log(currentSandwich);
}
<select name='drink'>
<option value=''>Please Choose One</option>
<option value='soda'>Soda</option>
<option value='tea'>Tea</option>
<option value='lemonade'>Lemonade</option>
<option value='water'>Water</option>
</select>
<select name='side'>
<option value=''>Please Choose One</option>
<option value='corn'>Corn</option>
<option value='potatoes'>Potatoes</option>
<option value='carrots'>Carrots</option>
</select>
This is a significantly different approach. It stores prices and some keys in the HTML markup, and uses a simple function to use these to update your sandwich.
I don't know if this sort of refactoring is what you were looking for, but it's one reasonable way to avoid such repetitive logic.
var sandwich = {};
var sandwichContainer = document.getElementById('sandwich-options');
sandwichContainer.addEventListener('change', function(ev) {
var select = event.target;
var choice = select.selectedOptions[0];
var choiceName = select.dataset.choiceName;
sandwich[choiceName] = choice.value
var priceName = select.dataset.choicePrice;
if (priceName) {
sandwich[priceName] = Number(choice.dataset.price);
}
console.log(sandwich)
});
<section class="order-section">
<h2 class="selection-header">Choose your...</h2>
<div id="sandwich-options">
<select class="bread-select" name="bread-select"
data-choice-name="breadType" data-choice-price="breadPrice">
<option selected disabled>Bread Type</option>
<option value="baguette" data-price="0.8">Baguette</option>
<option value="burger bun" data-price="0.8">Burger Bun</option>
<option value="ciabatta" data-price="0.9">Ciabatta</option>
<option value="focaccia" data-price="1.5">Focaccia</option>
<option value="ftira" data-price="0.8">Ftira</option>
<option value="olive bread" data-price="1.3">Olive Bread</option>
<option value="rye bread" data-price="1.3">Rye Bread</option>
<option value="sliced bread" data-price="0.9">Sliced Bread</option>
<option value="tortilla" data-price="1.6">Tortilla</option>
<option value="wheat bread" data-price="0.9">Wheat Bread</option>
<option value="whole grain bread" data-price="1.2">Whole Grain Bread</option>
</select>
<select class="sauces-select" name="sauce-select" data-
choice-name="sauce", data-choice-price="saucePrice">
<option selected disabled>Sauces</option>
<option value="chili sauce" data-price="0.25">Chili Sauce</option>
<option value="garlic and olive oil" data-price="0.35">Garlic and Olive Oil</option>
<option value="ketchup" data-price="0.15">Ketchup</option>
<option value="mayonnaise" data-price="0.15">Mayonnaise</option>
<option value="garlic basil mayo" data-price="0.45"
>Garlic Basil Mayo</option>
<option value="mustard" data-price="0.25">Mustard</option>
</select>
<select class="toasted-select" name="toasted-select" data-choice-name="toasted">
<option selected disabled>Toasted</option>
<option value="yes" data-price="0">Yes</option>
<option value="no" data-price="0">No</option>
</select>
</div>
</section>
An alternate approach would be to store all your prices in a object keyed by the select names, something like this:
var prices = {
'bread-select': {
'baguette': 0.8,
...
},
'sauces-select': {
'chili sauce': 0.25,
...
},
...
};
and then use select.name and choice.value from the above to key into this object. You would also need another object, or a way to enhance this one to store the final property names.
I'm looking to filter a list of options from a select input and remount the filtered list.
The backend will send over the array of options values that are to be filtered which match to those in the list.
I'm not sure if options is the best attribute to use? (
var initial_options = $('select_id').options
The options are of the form eg
[
'<option value="" selected="">Option 0</option>',
'<option value="1">Option 1</option>'],
...
]
the returned data to be used for filtering is of the form
var option_values_filter = [1,3,5,6]
then mounted with:
$('#select_id').html(filtered_options)
Assuming that your values filter is attempting to filter on the actual value option property you can try something like this:
const option_values_filter = [1, 3, 4];
const filtered = $("#id option").filter((index, option) => {
return (option_values_filter.indexOf(parseInt(option.value)) !== -1);
});
$(id).html(filtered);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Here is a pure javascript solution:
const option_values_filter = [1, 3, 4];
const selectElement = document.getElementById("id");
const newOptions = Array.apply(null, selectElement.options).filter((option) => {
return option_values_filter.indexOf(parseInt(option.value)) !== -1;
}).map(option => option.outerHTML);
selectElement.innerHTML = newOptions;
<select id="id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
This is an answer in combination with your last question. Using pure javascript.
var selectBoxEl = document.getElementById('selectBox');
var arrayOfNodes = selectBoxEl.childNodes;
var optionsArr = [];
var filteredArr = [];
var option_values_filter = [1, 3, 5, 6]
// loop through child nodes of select box and store option nodes as a string in array
for (var i = 0; i < arrayOfNodes.length; i++) {
if (arrayOfNodes[i].nodeName === 'OPTION') {
optionsArr.push(arrayOfNodes[i].outerHTML);
}
}
// function to filter options array and set select box options to filtered array
function filterOptions(filterOps) {
console.log(optionsArr[0].indexOf('value="'));
var val;
for (var i = 0; i < optionsArr.length; i++) {
val = optionsArr[i].substring(optionsArr[i].indexOf('value="') + 7, optionsArr[i].indexOf('value="') + 8);
if (filterOps.indexOf(parseInt(val)) !== -1) {
filteredArr.push(optionsArr[i]);
}
}
selectBoxEl.innerHTML = filteredArr;
}
filterOptions(option_values_filter);
<select id="selectBox">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Option List
I have an problem where my Random Option Picker picks a certain option that I don't want. How do I mitigate this?
var select = document.getElementById('edit-categories');
var items = select.getElementsByTagName('option');
var index = Math.floor(Math.random() * items.length + 1);
return select.selectedIndex = index;
The option that I want my random picker to ommit is : value="_none"
Use querySelectorAll along with :not and an attribute selector:
var items = select.querySelectorAll('option:not([value="_none"])');
var select = document.querySelector('select');
var items = select.querySelectorAll('option:not([value="_none"])');
console.log(items);
<select>
<option value="_none">--</option>
<option value="water">Water</option>
<option value="waste">Waste</option>
</select>
As an alternative, you can also use Array.prototype.filter (since It's a lot easier to pollyfil filter than the [not] selector):
var opts = [].filter.call(document.getElementById('edit-categories').options, function(opt){return opt.value != '_none'})
console.log(opts);
<select id="edit-categories">
<option value="_none">None
<option value="foo">Foo
<option value="foo">Bar
</select>
You can add a while loop just before setting the index :
var select = document.getElementById('edit-categories');
var items = select.getElementsByTagName('option');
var index = Math.floor(Math.random() * items.length);
while (items[index].value == '_none') {
index = Math.floor(Math.random() * items.length);
}
select.selectedIndex = index;
<select id="edit-categories">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="_none">none</option>
<option value="4">4</option>
</select>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
In my php, I have created two dropdown or selection lists. My drop down list below:
<select name="food">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
<select name="type">
<option value="">--</option>
<option value="Apple">Apple</option>
<option value="Lettuce">Lettuce</option>
<option value="Orange">Orange</option>
<option value="Tomato">Tomato</option>
<option value="Carrots">Carrots</option>
<option value="Mango">Mango</option>
</select>
m one page to the next.
It's possible to do this using jQuery, but it will quickly become unmanageable in a large-scale app or website.
If you go this route, I would avoid using two different select boxes, as this will force you to choose two different names for the form POST, unless you use more jQuery hackery to remedy this problem.
My suggestion is to look at a lightweight JS framework. Knockoutjs has what you need.
Look at this JSFiddle.
var fruitOpts = ["Apple", "Orange", "Mango"];
var vegOpts = ["Lettuce", "Tomato", "Carrots"];
$("#food").change(function () {
var val = $(this).val();
if (val === "") {
return;
}
$("#type").find('option').not(':first').remove().end();
$.each(val === "Fruits" ? fruitOpts : vegOpts, function (i, v) {
$("#type").append("<option value=\"" + v + "\">" + v + "</option>");
});
$.each(val === "Fruits" ? vegOpts : fruitOpts, function (i, v) {
$("#type").append("<option value=\"" + v + "\">" + v + "</option>");
});
});
It's version for two different php pages:
1.php
<script src="1.js"></script>
<a id='link' href='2.php'>go to another page</a>
<select id="food" name="food" onchange="selectFoodType()">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
<option value="Berries">Berries</option>
</select>
1.js
function selectFoodType()
{
var link = $('#link');
var type = $('select#food option:selected').val();
link.attr('href', link.attr('href') + '?type=' + type);
}
2.php
<script src="2.js"></script>
<select id='type' name="type" data-type='<?=$_GET['type']?>'>
<option value="">--</option>
<option data-type='Fruits' value="Apple">Apple</option>
<option data-type='Vegetables' value="Tomato">Tomato</option>
<option data-type='Vegetables' value="Carrots">Carrots</option>
<option data-type='Berries' value="Strawberry">Strawberry</option>
</select>
2.js
$(function() {
var type = $('select#type').data('type');
var itemsId = document.getElementById("type");
var items = itemsId.getElementsByTagName("option");
var selected_type = [], other_types = [];
selected_type[0] = items[0];
for (var i = 1; i < items.length; i++){
if ($(items[i]).data('type') === type) {
selected_type.push(items[i]);
continue;
}
other_types.push(items[i]);
}
selected_type = selected_type.sort(sortByName);
other_types = other_types.sort(sortByName);
$.merge(selected_type, other_types);
var list = '';
for (i=0; i<selected_type.length; i++) {
list += selected_type[i].outerHTML;
}
$(items).remove();
$(itemsId).append(list);
});
function sortByName(a, b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
return 0;
}
You should assign all Fruits and Vegetables contents in JavaScript object and display related contents of food value in another drop down, see below demo
Food:
<select name="food" id="food">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
Content
<select name="contents" id="contents">
<option value="">...</option>
</select>
JS code
var data = {
'Fruits':['Apple', 'Lettuce', 'Orange', 'Mango'],
'Vegetables': ['Tomato', 'Carrots']
};
document.getElementById("food").onchange = function(Event){
var contents = document.getElementById("contents");
contents.innerHTML = "";
for(var i in data[this.value]){
var option = document.createElement("option");
option.setAttribute('value',data[this.value][i]);
option.text = data[this.value][i];
contents.appendChild(option);
}
var expect_data = Event.target.value == "Fruits" ? "Vegetables" : "Fruits";
for(var i in data[expect_data]){
var option = document.createElement("option");
option.setAttribute('value',data[expect_data][i]);
option.text = data[expect_data][i];
contents.appendChild(option);
}
}
FIDDLE DEMO
you need to use JQuery for this purpose.
See My Solution: http://jsfiddle.net/inventorx/YU4vJ/
Code Here:
HTML
<select name="food" >
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
<select name='type' >
<option>-- Select Food Type --</option>
</select>
<select id='Fruits' style='display:none' >
<option value="">--</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
</select>
<select id='Vegetables' style='display:none' >
<option value="">--</option>
<option value="Lettuce">Lettuce</option>
<option value="Tomato">Tomato</option>
<option value="Carrots">Carrots</option>
</select>
JQUERY
$(document).ready(function(){
$("select[name='food']").on("change", function(){
var value = $(this).val();
$("select[name='type']").html($("#" + value).html());
});
});
Another option.
The list splits into two arrays: food, corresponding to the selected type; and does not correspond to the selected type. Each of these arrays, in turn, is sorted by name:
JSFIDDLE
HTML:
<select id="food" name="food" onchange="selectFoodType()">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
<option value="Berries">Berries</option>
</select>
<select id='type' name="type">
<option value="">--</option>
<option data-type='Fruits' value="Apple">Apple</option>
<option data-type='Vegetables' value="Lettuce">Lettuce</option>
<option data-type='Vegetables' value="Tomato">Tomato</option>
<option data-type='Berries' value="Strawberry">Strawberry</option>
</select>
JQuery:
function selectFoodType()
{
var type = $('select#food option:selected').val();
var itemsId = document.getElementById("type");
var items = itemsId.getElementsByTagName("option");
var selected_type = [], other_types = [];
selected_type[0] = items[0];
for (var i = 1; i < items.length; i++){
if ($(items[i]).data('type') === type) {
selected_type.push(items[i]);
continue;
}
other_types.push(items[i]);
}
selected_type = selected_type.sort(sortByName);
other_types = other_types.sort(sortByName);
$.merge(selected_type, other_types);
var list = '';
for (i=0; i<selected_type.length; i++) {
list += selected_type[i].outerHTML;
}
$(items).remove();
$(itemsId).append(list);
}
function sortByName(a, b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
return 0;
}