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 to hide select option with condition Less than (<)

There are two select lists call #ageSelect1 and #ageSelect2. I want to hide #ageSelect2 options when page load less than some value. Following code is not working. But
$("#ageSelect2 option[value =" + ageSelectStart + "]").hide();
code is working. how to use less than condition.?
<script type = "text/javascript" >
$(document).ready(function() {
var ageSelectStart = 21;
var ageSelectEnd = 35;
$("#ageSelect2 option[value <" + ageSelectStart + "]").hide();
});
< /script>

try this
$(window).load(function() {
var ageSelectStart = 21;
var ageSelectEnd = 35;
var elSelect1 = $("#ageSelect1"),
elSelect2 = $("#ageSelect2");
elSelect1.find('option').each(function(index, el){
if($(el).val() < ageSelectStart){
//$(el).prop('disabled', true).hide();
$(el).remove();
}
});
elSelect2.find('option').each(function(index, el){
if($(el).val() > ageSelectEnd){
//$(el).prop('disabled', true).hide();
$(el).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="startage" id="ageSelect1">
<option value="10">10</option>
<option value="11">11</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
<select name="endage" id="ageSelect2">
<option value="36">36</option>
<option value="37">37</option>
<option value="24">24</option>
<option value="25">25</option>
</select>

<script type = "text/javascript" >
$(document).ready(function() {
var ageSelectStart = 21;
var ageSelectEnd = 35;
$("#ageSelect2").find("option").show().each(function() {
if ($(this).attr("value") < ageSelectStart) {
$(this).hide();
}
});
});
</script>

Just try this
<script type = "text/javascript" >
$(document).ready(function() {
var ageSelectStart = 21;
var ageSelectEnd = 35;
var selectedElement =document.getElementById("ageSelect2")
for (var i=0; i<selectedElement.length; i++)
{
if (selectedElement.options[i].value < ageSelectStart)
{
selectedElement.options[i].hide();
}
}
});
< /script>

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

hide() and show() select option not working in chrome

I am trying to do as selected option moves to another select box with its corresponding optgroup label using below code,
My jsp :
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple">
<optgroup label="Lesson">
<option>about myself</option>
<option>about yourself</option>
</optgroup>
<optgroup label="Game">
<option>about my game</option>
</optgroup>
<optgroup label="Worksheet">
<option>content</option>
<option>content2</option>
</optgroup>
</select>
<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple">
</select>
My Jquery :
$(document).ready(function()
{
$('#SelectFeatures optgroup').clone().hide().appendTo('#SelectedFeatures');
$('#SelectedFeatures option').hide();
$('#SelectFeatures').on('click', 'option', function()
{
var thisText = $(this).text();
this.disabled = true;
var thisGroup = $(this).parent();
var targetGroup = $('#SelectedFeatures optgroup[label="' + thisGroup.attr('label') + '"]');
targetGroup.show();
targetGroup.find('option').filter(function() { return $(this).text() == thisText; }).show();
});
$('#SelectedFeatures').on('click', 'option', function()
{
var thisText = $(this).text();
$(this).hide();
$('#SelectFeatures option').filter(function() { return $(this).text() == thisText; }).prop('disabled', false);
var thisGroup = $(this).parent();
if (thisGroup.find('option:visible').length == 0)
{
thisGroup.hide();
}
});
});
Above code working very fine in firefox but In chrome 34.0 this $('#SelectedFeatures option').hide(); not works, In chrome 37.0 all options will hiding when click on single option and In chrome 39.0 that selected options not shows like optgroup option.
My fiddle : http://jsfiddle.net/Manivasagam/f7xhbLf7/4/
How to change my code as Jquery cross browser compatibility?

Hiding options is incorrect if you want cross-browser. You should insert/remove/disable options dynamically.
$(function() {
$("#SelectFeatures").on("click", "option", function() {
var _optgroup_index = $(this).parent().index();
var _optgroup_label = $(this).parent().attr("label");
var $optgroup = $('#SelectedFeatures optgroup[label="' + _optgroup_label + '"]');
var _option_index = $(this).index();
var _option_label = $(this).text();
var $option = $('<option data-index="' + _option_index + '"></option>').text(_option_label);
var $elements;
if ($optgroup.length === 0) {
// create new optgroup, append and reorder
$optgroup = $('<optgroup data-index="' + _optgroup_index + '" label="' + _optgroup_label + '"></optgroup>').appendTo("#SelectedFeatures");
$option.appendTo($optgroup);
$elements = $("#SelectedFeatures optgroup");
if ($elements.length > 1) {
$elements.detach().sort(function(a, b) {
return $(a).attr("data-index") - $(b).attr("data-index");
}).appendTo("#SelectedFeatures");
}
} else {
// append new option and reorder
$option.appendTo($optgroup);
$elements = $optgroup.find("option");
if ($elements.length > 1) {
$elements.detach().sort(function(a, b) {
return $(a).attr("data-index") - $(b).attr("data-index");
}).appendTo($optgroup);
}
}
$(this).prop("disabled", true);
});
$("#SelectedFeatures").on("click", "option", function() {
var _option_label = $(this).text();
$("#SelectFeatures option").filter(function() {
return $(this).text() === _option_label;
}).prop("disabled", false);
if ($(this).siblings().length === 0) {
$(this).parent().remove();
} else {
$(this).remove();
}
});
});
select {
width: 12em;
height: 24em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple">
<optgroup label="Lesson">
<option>about myself</option>
<option>about yourself</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
<optgroup label="Game">
<option>about my game</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
<optgroup label="Worksheet">
<option>content</option>
<option>content2</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
</select>
<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple">
</select>

autoselect select options with javascript / jquery

I am working on a function in Javascript/jQuery.
The function will search for usernames in the "select" element "Y" and selects them whene you copied a bunch of usernames in the textarea "X" with ', ', ',', ';' or ' ' as separator and also if you do it the other way around:
javascript/jQuery:
$(document).ready(function() {
$("dd#id-element select#id").attr({"multiple": "multiple", "size": 25, "name": "id[]"});
});
$(function() {
$("select#id").change(function() {
var selected_id = $(this).val(),
selected_name = new Array();
$(this).find("option:selected").each(function() {
selected_name.push($(this).text());
});
$("textarea#id_field").val(selected_id);
$("textarea#name_field").val(selected_name);
console.log(selected_id, selected_name);
});
$("textarea#name_field").keyup(function() {
$("select#id option").removeAttr("selected");
var names_raw = $(this).val(),
names = names_raw.replace(/(, | |,)/gi, ";"),
selected_name = names.split(";"),
selected_id = new Array();
$.each(selected_name, function(i, value) {
if (value != "" && value != null) {
$("select#id option[label='" + value + "']").attr("selected", true);
selected_id.push($("select#id option[label='" + value + "']").val());
}
});
});
});
HTML code:
<select name="id" id="id">
<option value="1092" label="00lara00">00lara00</option>
<option value="5105" label="010201e">010201e</option>
<option value="1725" label="0411dennis">0411dennis</option>
<option value="1795" label="051259">051259</option>
<option value="2281" label="0815Timmey">0815Timmey</option>
<option value="3337" label="0vlinder0">0vlinder0</option>
<option value="127" label="1001gece">1001gece</option>
<option value="3693" label="111nizza">111nizza</option>
<option value="821" label="114helen">114helen</option>
<option value="2887" label="1212whopper">1212whopper</option>
<option value="5564" label="123boo">123boo</option>
</select>
<textarea name="name_field" id="name_field"></textarea>
when i select some usernames in the select element, it works fine, the usernames are copied to the textarea.
when i paste some usernames in the textarea, everything is deselected like it should, but there is nothing new selected

I finally got it working. This is how I did it
Javascript:
$(document).ready(function() {
$("dd#id-element select#id").attr({"size": 25});
});
$(function() {
$("select#id").change(function() {
var selected_id = $(this).val(),
selected_name = new Array();
$(this).find("option:selected").each(function() {
selected_name.push($(this).text());
$(this).addClass("checked");
});
$("textarea#name_field").val(selected_name);
$("textarea#name_field").keyup();
});
$("textarea#name_field").keyup(function() {
$("select#id option.checked").attr("checked", null).attr("selected", null).removeClass("checked");
var names_raw = filterValue($(this).val()),
names = names_raw.replace(/(, | |,|\s)/gi, ";"),
selected_name = names.split(";"),
selected_id = new Array();
$(this).val(names_raw)
$.each(selected_name, function(i, value) {
if (value != "" && value != null) {
if ($("select#id option[label='" + value + "']").length > 0) {
$("select#id option[label='" + value + "']").attr('checked', 'checked').attr('selected', 'selected').addClass("checked").focus();
selected_id.push($("select#id option[label='" + value + "']").val());
}
}
});
$("select#id").val(selected_id);
});
});
html code:
<select name="id[]" id="id" multiple="multiple">
<option value="1092" label="00lara00">00lara00</option>
<option value="5105" label="010201e">010201e</option>
<option value="1725" label="0411dennis">0411dennis</option>
<option value="1795" label="051259">051259</option>
<option value="2281" label="0815Timmey">0815Timmey</option>
<option value="3337" label="0vlinder0">0vlinder0</option>
<option value="127" label="1001gece">1001gece</option>
<option value="3693" label="111nizza">111nizza</option>
<option value="821" label="114helen">114helen</option>
<option value="2887" label="1212whopper">1212whopper</option>
<option value="5564" label="123boo">123boo</option>
</select>
<textarea name="name_field" id="name_field"></textarea>