Develop Reference

jQuery / JS form issue

I have a HTML form which I need help with adding and removing data using jQuery (or JavaScript).
$('.purchase-car').on('click', 'button', function(event) {
event.preventDefault();
/* Act on the event */
var carName = $('.purchase-car select').val();
var carPrice = $('.purchase-car select').find(':selected').data('price');
var carQuantity = $('.purchase-car input[name="quantity"]').val();
var totalPrice = carPrice * carQuantity;
var orderToAdd = '<li>' + '<span>' + carName + ' (' + carQuantity + ')</span> <span>remove</span>' + '</li>';
$('ul').prepend(orderToAdd);
$('#payment-amount').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>volvo (1) <span>remove</span>
</li>
<li>mercedes (2) <span>remove</span>
</li>
</ul>
<p>Total Price: <span id="payment-amount">30</span>
</p>
<div class="purchase-car">
<select>
<option value="volvo" data-price="10">Volvo ( $10 )</option>
<option value="saab" data-price="20">Saab ( $20 )</option>
<option value="mercedes" data-price="10">Mercedes ( $10 )</option>
<option value="audi" data-price="30">Audi ( $30 )</option>
</select>
<input type="number" name="quantity" value="1">
<button type="submit">Add</button>
</div>
There will be one select field and one input field, once I click add (on submit) both of the values should be added in a ul as list item. I have successfully done so. But I need a calculation here.
Like, what's the total price of selected objects. Also It should subtract from total price when I remove particular object.
http://jsfiddle.net/getanwar/s7ob01o1/
Update: I don't want to insert those data directly to the DOM. Because this is a part of another form and I don't want this data to be editable from console or via developer tools. So if I could store these data into an array or an object and calculate from there would be really helpful.

Taking your update into consideration, you should create a global variable.
var vehicles = new Array;
To increase the value, in the function where you insert the vehicle add the line:
var currentValue = parseInt($("#payment-amount").html());
$("#payment-amount").html(curentValue + (carPrice * carQuantity));
vehicles.push({price: carPrice, quantity: carQuantity});
Then to update the price when you remove one:
$("ul").on("click", "li span", function() {
var index = $(this).parent().index();
var currentValue = parseInt($("#payment-amount").html());
var removeValue = vehicles[index]['price'] * vehicles[index]['quantity'];
$("#payment-amount").html(currentValue - removeValue);
vehicles.splice(index, 1);
$(this).parent().remove();
});

Get selected value of option with multiple dropdown menus using javascript

I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.
.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?
I have tried var e = document.getElementsByClassName("testClass"); which did not work.
I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.
http://jsfiddle.net/8awqLek4/4/
HTML Code
<ul>
<li>
<div class="ftrsTitle">BODY</div>
<select class="testClass" id="testId">
<option>Select</option>
<option ftr="bod" value="blk">Black</option>
<option ftr="bod" value="grn">Kelly Green</option>
<option ftr="bod" value="red">Red</option>
<option ftr="bod" value="roy">Royal</option>
</select>
</li>
<li>
<div class="ftrsTitle">TRIM</div>
<select class="testClass">
<option>Select</option>
<option ftr="trm" value="blk">Black</option>
<option ftr="trm" value="grn">Kelly Green</option>
<option ftr="trm" value="red">Red</option>
<option ftr="trm" value="roy">Royal</option>
</select>
</li>
</ul>
<div id="vars"></div>
Javascript Code
$(document).ready(function () {
$("select").on('change', function () {
var e = document.getElementById("testId");
var optionsText = e.options[e.selectedIndex].text;
var optionsValue = e.options[e.selectedIndex].value;
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
});

To read select value you can simply use $(this).val(). To get selected option label you should use text() method.
Fixed code looks like this:
$("select").on('change', function () {
var optionsText = $('option:selected', this).text();
var optionsValue = $(this).val();
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
Demo: http://jsfiddle.net/8awqLek4/3/

This should do it:
$(document).ready(function(){
$("select").on('change', function(){
var e = $(this).find("option:selected");
$("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
});
});
use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.
http://jsfiddle.net/8awqLek4/5/

jQuery select (Dropdown) populate from array

I currently have this here working..
$(document).ready(function() {
$("#image").change(function() {
$("#imagePreview").empty();
$("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />");
});
});
<select name="image" id="image" class="inputbox" size="1">
<option value="imageall.jpg" selected> - All - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
</div>
from this previous question:
Previous Question
I was wondering how can I populate the from a jQuery Array instead?
How could I do that? So basically the values and name from an array
This is the example in Fiddle i will be using Example Working

function populateSelect(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('please select', '');
$.each(items, function () {
el.options[el.options.length] = new Option(this.name, this.value);
});
}
As seen here:
Using javascript and jquery, to populate related select boxes with array structure

You may want to retrieve names and values from JSON array this way.
var image_maps = {image1: "image1.jpg", image2: "image2.jpg"};
$.each(image_maps , function(name, value) {
alert("name: " + name + " value: " + value);
});

Remove item from second dropdown based on selection in First using Javascript

I have four dropdown, and I am manually filling them.
Now I want to add a javacsript that when I select first dropdown option, then in the second third fourth dropdowns, that item or option can be removed.
And same flow goes for second third and fourth and so on.
I am giving my code but till now, it is not working fine.
I am only tring for the first ladder, that is when option in first is selected then item removed from second, third and fourth dropdowns.
function RemoveItems(){
var List1 = document.getElementById("ddlSortField");
var sortList1 = List1.options[List1.selectedIndex].text;
var List2 = document.getElementById("ddlSortField2");
var sortList2 = List2.options[List2.selectedIndex].text;
List2.options.remove(sortList1);
var List3 = document.getElementById("ddlSortField3");
var sortList3 = List3.options[List3.selectedIndex].text;
List3.options.remove(sortList2);
var List4 = document.getElementById("ddlSortField4");
var sortList4 = List4.options[List4.selectedIndex].text;
List4.options.remove(sortList3);
}

In your code:
> function RemoveItems(){
Variable names starting with a capital letter are, by convention, reserved for constructors, so:
function removeItems() {
> var List1 = document.getElementById("ddlSortField");
> var sortList1 = List1.options[List1.selectedIndex].text;
So sortList1 will be a string.
> var List2 = document.getElementById("ddlSortField2");
> var sortList2 = List2.options[List2.selectedIndex].text;
> List2.options.remove(sortList1);
The remove method of the options collection takes a single parameter that is an index of one of the options. You have not shown what the value of sortList1 nor how many options List2 has. Note that the options collection is live, so if you remove an option, the indexes of other options may be adjusted so that they are contiguous from 0 to options.length - 1.

You can use such code : jsFiddle.
Basically, you first bind the change event to each list and when you change the value you hide these elements in all lists after...

I've made a slightly different one than #Muhammad Omair's, this one is a bit more dynamic. Note that this is jQuery
var removeSelection = function(select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function() {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').remove();
});
};
$(function() {
$('select').change(function() {
removeSelection($(this));
});
});
And here's a jsfiddle of it http://jsfiddle.net/cA3F9/

Use jQuery to remove option
$(document).ready(function(){
$('#ddlSortField').change(function(){
var index = $("#ddlSortField option:selected").val();
$('#ddlSortField2 option:eq(' + index + ')').remove();
$('#ddlSortField3 option:eq(' + index + ')').remove();
$('#ddlSortField4 option:eq(' + index + ')').remove();
});
});
Note in your html your option value must be same like this:
<select id="ddlSortField">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<select id="ddlSortField1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>

Three level connected boxes

Is there a way add another dropdown form to this script?
http://javascript.internet.com/navigation/connected-comboxes.html
Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made...
Thanks in advance...

i was bored... try this. requires jquery
html:
<form>
<select id="s1">
<option>One</option>
<option value="two">Two</option>
<option>Three</option>
</select>
<select id="s2"></select>
<select id="s3"></select>
</form>
js:
// chain select boxes select1 and select2
//
// select1 should have options set already choices is an object
// literal with the level2 options for each value in select1.
//
// options can be either scalars or arrays of length 2,
// in which case val[0] is the value and val[1] is the label text
//
//
var chain = function(select1, select2, choices) {
select1.change( function() {
select2.find('option').remove();
var options = ['<option>---</option>'];
var value = $(this).val();
if( value in choices ) {
var subchoices = choices[value]
for(var i = 0; i < subchoices.length; i++) {
if( subchoices[i].constructor == Array) {
options.push('<option value="'
+ subchoices[i][0]
+ '">'
+ subchoices[i][1]
+ '</option>');
}
else {
options.push('<option>'
+ subchoices[i]
+ '</option>');
}
}
}
select2.append($(options.join('')));
} );
select1.change();
}
you can then define sub-lists
var sub1 = { One: ["One1", "One2", "One3"],
two: [["two1", "Two1"], "Two2"]
};
var sub2 = {two1: [4,5,6,[7, 8]]};
and activate like so:
$( function() {
chain( $('#s1'), $('#s2'), sub1);
chain( $('#s2'), $('#s3'), sub2);
});