Develop Reference

Jquery send result of SUM to div

I want to:
Get value from select, sum with other values, and place it inside a span.
Can I send the result of a value to a div/span without having to submit with a button? Is that possible?
please look at my fiddle: https://jsfiddle.net/groseler/3mq1ye1y/
HTML
$(function () {
$("#field16-1").change(function() {
var val = $(this).val();
var comEx = "150";
var youngDriver = "100";
var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
});
$("#result").html(resultSum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field16-1">
<option value="">Please select...</option>
<option value="120">120</option>
<option value="230">230</option>
<option value="260">260</option>
</select>
<div>
Result should appear here ---> <span id="result" ></span></div>

Your code works after a bit change. You have only some typo. You need to add the $("#result").html(resultSum) into the change callback.
You don't need to submit anything. Submit is for the forms and after submitting the data almost always go to the server side code
$(function () {
$("#field16-1").change(function() {
var val = $(this).val();
var comEx = "150";
var youngDriver = "100";
var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
$("#result").html(resultSum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field16-1">
<option value="">Please select...</option>
<option value="120">120</option>
<option value="230">230</option>
<option value="260">260</option>
</select>
<div>
<span id="result" ></span></div>

Put $("#result").html(resultSum); inside the function
$(function () {
$("#field16-1").change(function() {
var val = $(this).val();
var comEx = "150";
var youngDriver = "100";
var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
$("#result").html(resultSum);
});
});
JSFIDDLE

The mistake you have done is that you put $("#result").html(resultSum); this outside the change event of dropdown.

Move $("#result").html(resultSum); statement to within .change() so the the sum can be changed every time the value of the select element changes.
$(function () {
$("#field16-1").change(function() {
var val = $(this).val();
var comEx = "150";
var youngDriver = "100";
var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
$("#result").html(resultSum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field16-1">
<option value="">Please select...</option>
<option value="120">120</option>
<option value="230">230</option>
<option value="260">260</option>
</select>
<div>
Result should appear here ---> <span id="result" ></span></div>

How can i save this script to Local Storage

I want simply save changes that i've made with main text heading, changed color/font-size/font using Local Storage. So after page reload changes will stay at browser. How could i make this?
Html:
<div class="main_text">
<h1>Change Headings</h1>
</div>
<select id="selection">
<option value="h1">H1</option>
<option value="h2">H2</option>
<option value="h3">H3</option>
<option value="h4">H4</option>
<option value="h5">H5</option>
</select>
<div class="color_picker">
<h3>Choose Text Color</h3>
<input type="color" id="color_picker">
</div>
<div class="change_font">
<h3>Change Font</h3>
<select id="select_font">
<option value="Sans-serif">Sans-serif</option>
<option value="Monospace">Monospace</option>
<option value="Serif">Serif</option>
<option value="Fantasy">Fantasy</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
</div>
<div class="change_size">
<h3>Font Size</h3>
<select id="change_font_size">
<option value="14">14</option>
<option value="18">18</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
</select>
</div>
JQuery:
$('#selection').change(function () {
var tag = $(this).val();
$(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
});
$('#color_picker').change(function() {
var color_p = $(this).val();
$('.main_text').css("color", color_p);
});
$('#select_font').change(function () {
var change_font = $(this).val();
$(".main_text").css("font-family", change_font);
});
$("#change_font_size").change(function() {
var font_size = $(this).val();
$('.main_text > *').css("font-size", font_size + "px");
});
JSfiddle

DEMO
$(document).ready(function () {
var tag = localStorage.tag || $('#selection').val();
var color = localStorage.color || $('#color_picker').val();
var font = localStorage.font || $('#select_font').val();
var size = localStorage.font_size || $('#change_font_size').val();
$('.main_text').css({
"color": color,
"font-family": font,
"font-size": size
}).html("<" + tag + ">Change Headings</" + tag + ">");
$('#selection').val(tag);
$('#color_picker').val(color);
$('#select_font').val(font);
$('#change_font_size').val(size);
$('#selection').change(function () {
var tag = $(this).val();
localStorage.tag = tag;
$(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
});
$('#color_picker').change(function () {
var color_p = $(this).val();
localStorage.color = color_p;
$('.main_text').css("color", color_p);
});
$('#select_font').change(function () {
var change_font = $(this).val();
localStorage.font = change_font;
$(".main_text").css("font-family", change_font);
});
$("#change_font_size").change(function () {
var font_size = $(this).val();
localStorage.font_size = font_size;
$('.main_text > *').css("font-size", font_size + "px");
});
});

Add this code after your JS code:
$(document).ready(function () {
//load values if found
if (localStorage.getItem("selection") != null) {
$('#selection').val(localStorage.getItem("selection")).trigger("change");
}
if (localStorage.getItem("color_picker") != null) {
$('#color_picker').val(localStorage.getItem("color_picker")).trigger("change");
}
if (localStorage.getItem("select_font") != null) {
$('#select_font').val(localStorage.getItem("select_font")).trigger("change");
}
if (localStorage.getItem("change_font_size") != null) {
$('#change_font_size').val(localStorage.getItem("change_font_size")).trigger("change");
}
});
Here is the JSFiddle demo

Count Unique Selection from Multiple Dropdown

I'm new to jquery, I'm working on a survey form and I have multiple dropdown menus for different questions but they all have the same dropdown value. Supposed I have:
<select name="Forms[AgentIsPitch]" id="Forms_AgentIsPitch">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
<select name="Forms[MandatoryOptIsStated]" id="Forms_MandatoryOptIsStated">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
And other different dropdowns with different id's. What is the best way to count how many has selected Yes, No and N/A/ ? Thanks

you can do it simple this way
$('select').change(function() {
// get all selects
var allSelects = $('select');
// set values count by type
var yes = 0;
var no = 0;
// for each select increase count
$.each(allSelects, function(i, s) {
// increase count
if($(s).val() == 'Yes') { yes++; }
if($(s).val() == 'No') { no++; }
});
// update count values summary
$('.cnt-yes').text(yes);
$('.cnt-no').text(no);
});
DEMO

Try this — https://jsfiddle.net/sergdenisov/h8sLxw6y/2/:
var count = {};
count.empty = $('select option:selected[value=""]').length;
count.yes = $('select option:selected[value="Yes"]').length;
count.no = $('select option:selected[value="No"]').length;
count.nA = $('select option:selected[value="N/A"]').length;
console.log(count);

My way to do it would be :
var optionsYes = $("option[value$='Yes']:selected");
var optionsNo = $("option[value$='No']:selected");
var optionsNA = $("option[value$='N/A']:selected");
console.log('number of yes selected = ' + optionsYes .length);
console.log('number of no selected = ' + optionsNo .length);
console.log('number of N/A selected = ' + optionsNA .length);
Check the console (or replace with alert).
With your code, it would be something like that (assuming you want to check on a button click event) :
<select name="Forms[AgentIsPitch]" id="Forms_AgentIsPitch">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
<select name="Forms[MandatoryOptIsStated]" id="Forms_MandatoryOptIsStated">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
<button class="btn btn-primary" id="countYes"></button>
<script type="text/javascript">
$('#countYes').on('click', function(){
var optionsYes = $("option[value$='Yes']:selected");
var optionsNo = $("option[value$='No']:selected");
var optionsNA = $("option[value$='N/A']:selected");
console.log('number of yes selected = ' + optionsYes .length);
console.log('number of no selected = ' + optionsNo .length);
console.log('number of N/A selected = ' + optionsNA .length);
});
</script>
You can check at another event, I choosed a button click just for example.

There is likely a cleaner way to do this, but this will get the job done (assuming there is a button click to trigger things):
$("#theButton").on('click', function() {
var totalSelect = 0;
var totalYes = 0;
var totalNo = 0;
var totalNA = 0;
$("select").each(function(){
totalSelect++;
if ($(this).val() == "Yes") { totalYes++; }
if ($(this).val() == "No") { totalNo++; }
if ($(this).val() == "N/A") { totalNA++; }
});
});
Hope this helps the cause.

In common you can use change event:
var results = {};
$('select').on('change', function() {
var val = $(this).val();
results[val] = (results[val] || 0) + 1;
});
DEMO
If you want count for each type of select:
$('select').on('change', function() {
var val = $(this).val();
var name = $(this).attr('name');
if (!results[name]) {
results[name] = {};
}
results[name][val] = (results[name][val] || 0) + 1;
});
DEMO
In the results will be something like this:
{
"Forms[AgentIsPitch]": {
"Yes": 1,
"No": 2,
"N/A": 3
},
"Forms[MandatoryOptIsStated]": {
"No": 5,
"N/A": 13
},
}
UPD: for counting current choice:
$('select').on('change', function() {
var results = {};
$('select').each(function() {
var val = $(this).val();
if (val) {
results[val] = (results[val] || 0) + 1;
}
})
console.log(results);
});
DEMO

How can we create the another select box with some options through JQuery

I would like to create another select box from a select box value. through Jquery.
We have applied this codes and it's not working at the moment.
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
var rooms = $("#rooms");
var ROOMS = rooms.val() ;
var max_adults_a = 3;
var min_adults_a = 2;
var max_adults = max_adults_a;
var min_adults = min_adults_a;
var num = min_adults * ROOMS;
ROOMS.change(function() {
while (num <= max_adults_a * ROOMS) {
$('#person').append($('<option></option>').val(num).html(num)
)};
});
});
</script>
</head>
<body>
<h1>Populating Select Boxes</h1>
Category:
<select name="rooms" id="rooms">
<option Selected value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
person
<select name="person" id="person">
</select>
</body>
we have 2 select box one for rooms, and other for Persons, We have a list for Rooms, but we have to update the Persons according to the rooms size, if we have a room type "3" then the persons will be allowed for this room is 6,7,8,9.
The options for Persons will change accordingly.
Please provide me suitable solutions
Thanks
Rod

$(document).ready(function () {
var max_adults = 3;
var min_adults = 2;
$('#rooms').change(function(){
var room_num = $(this).val();
var options = '';
for (var i = min_adults * room_num; i <= max_adults * room_num; i++) {
options += '<option value="'+i+'">'+i+'</option>'
}
$('#person').html(options);
});
$('#rooms').change();
});

On jsfiddl.net
<head>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
var rooms = $("#rooms");
var ROOMS = rooms.val() ;
var max_adults_a = 3;
var min_adults_a = 2;
var max_adults = max_adults_a;
var min_adults = min_adults_a;
$("#rooms").change(function() {
$('#person').html("");
var selectedRoom = parseInt($("#rooms option:selected").val(), 10)
var num = min_adults * selectedRoom ;
while (num <= max_adults_a * selectedRoom ) {
$('#person').append($('<option></option>').val(num).html(num));
num++;
}
});
});
</script>
</head>
<body>
<h1>Populating Select Boxes</h1>
Category:
<select name="rooms" id="rooms">
<option Selected value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
person
<select name="person" id="person">
</select>
</body>

Cut option in select

I have:
<select>
<option value=1>1</option>
<option value=1>2</option>
<option value=1>3</option>
...
<option value=97>97</option>
<option value=98>98</option>
<option value=99>99</option>
</select>
How can i with jQuery cut with this all option from value 20 to 40?

var select = $('#mySelect');
for (var i = 20; i <= 40; i++)
{
select.find('option[value="' + i + '"]').remove();
}
The simpliest way...
Another is filter(), here:
$('#mySelect option').filter(function() {
return $(this).val() >= 20 && $(this).val() <= 40;
}).remove();