We Keep Coding

How to add DIV's dynamically in a form based on a select input with Jquery

var beneficiarioDiv = $('<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>');
$('#beneficiarios').change(function() {
var beneficiarios = $('#beneficiarios :selected').val();
// this gives me the value that the user selected
<div class="beneficiarios-wrapper"></div>
// this is the div where I want to append the number of divs selected by the user
});
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<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>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
I have been hitting my head cuz I can't think on a way to get this to work ( I'm new with Jquery )
So.. I have a select input field in a form with number options.. I want to check which of the options the user selected and add a DIV the number of times the user selected ( from 0 to 10 ) and if the user selects a number lower than the one he previously chose delete the DIVs previously added and add the ones he now chose (if he selects number 3 add 3 DIVs, if he now selects 2 because he was just mistaken then just show 2 instead of the 3)
I know how to get the number the user selected with the .change event listener and the :selected.val() method.. my problem is appending the divs that number of times the user selected, and deleting them if the user selects a number lower than.
Please i don't know how to make this work!

In your change function, first clear the wrapper and then append the divs in a loop
var beneficiarioDiv = '<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>';
$('#beneficiarios').change(function() {
var beneficiarios = $('#beneficiarios :selected').val();
// this gives me the value that the user selected
$('.beneficiarios-wrapper').empty();
while (beneficiarios--) {
$('.beneficiarios-wrapper').append(beneficiarioDiv);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<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>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="beneficiarios-wrapper"></div>

You can clear the div on change event. Then use a for loop to append div
const divToAppend = '<div>test</div>';
let number = $('#beneficiarios').val();
$('#beneficiarios').on('change', function () {
$('#placeholder').html('');
number = $(this).val();
for (let i = 0; i < number; i++) {
$('#placeholder').append(divToAppend);
}
});
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<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>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="placeholder"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You could just append the divs in a loop:
var b = = $('#beneficiarios :selected').val();
while(b--) {
$(".beneficiarios-wrapper").append("<div>"+b+"</div>")
}

how to add selected values from two <select> tag and show sum in third <select>

$(document).ready(function () {
var presentyear = new Date().getFullYear();
for(y = 1995; y <= presentyear; y++)
{
var optn = document.createElement("option");
optn.text = y;
optn.value = y;
document.getElementById('year10').options.add(optn);
}
});
<select id="year10">
<option>select year</option>
//all the values will be dynamically added as called by function in js
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<select id="year12">
<option id="calvalue"> </option>
</select>
I want to save selected values from two select tags and show the sum in a separate third select dropdown.
As in the snippet above, I have three select tags, the javascript code fills the options for 'year10' select from 1995 to 2017.
The 'gap' select have 5 values.
Now, i want to add the selected values of 'year10' and 'gap' and show in the single option (with id='calvalue') in 'year12' select tag.
Also, when i change the values in either first two selects, the summed value in year12 must change with it.
How to do this?
Any help is appreciated

To achieve this you just need to add a change event handler to both of the selects which reads the values and adds them together.
Note that putting the result in another option of a select is a little odd. I'd suggest using a readonly text box instead, something like this:
$(function() {
var presentyear = new Date().getFullYear(), options = '';
for (y = 1995; y <= presentyear; y++) {
options += '<option value="' + y + '">' + y + '</option>';
}
$('#year10').append(options);
$('#year10, #gap').change(function() {
var year = parseInt($('#year10').val(), 10) || 0;
var gap = parseInt($('#gap').val(), 10) || 0;
$('#year12').val(!year ? '' : year + gap);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year10">
<option>select year</option>
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<input type="text" readonly="readonly" id="year12">

if you're ok with jquery... then
<select id="num1" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="num2" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="res">
<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>
</select>
<script>
function addThem(){
var num1 = $("#num1").val();
var num2 = $("#num2").val();
$("#res").val(Number(num1) +Number(num2));
}
</script>
this Plunker sample i did should help you out

function jsFunction(){
var myselect = document.getElementById("selectOpt");
$("#secondselectbox").val(myselect);
}
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondselectbox">
</select>
In this code After value selection you can do any new function(another select tag).

You will have to work on the specifics your self, but this should get you started.
let nextOption = {first: 1, seccond: 1}
function selected(selector, option) {
if (selector === 'first') {
nextOption.first = parseInt(option.value);
}
else if (selector === 'seccond') {
nextOption.seccond = parseInt(option.value);
}
let newOption = document.createElement("option");
newOption.text = nextOption.first + nextOption.seccond;
document.getElementById('final').add(newOption);
}
selected();
<select onClick="selected('first', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select onClick="selected('seccond', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="final">
</select>

How to select the given option in dropdown

I've a dropdown
<select id="ddl1">
<option value="0">number</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>
<option value="8">8</option>
</select>
now what i'm doing is as soon as user clicks on ddl1 i change its default value to 4 like this
$(function () {
var defaultValue = "4";
$('#ddl1').click(function () {
var select_val = $('#ddl1').val();
if (select_val == "0")
$('#ddl1').val(defaultValue);
});
});
but now the problem is when user tries to select the default option of dropdown i.e number, option 4 is selected. Any ideas how to fix this?
The problem is when the user just clicks on dropdown -> option4 must be selected and when user clicks on option number -> option number must be selected instead of option 4.

Not sure why you're doing that but focusin or focus events can help you achieve that as follows:
$(function() {
$('#ddl1').on('focusin', function() {
this.value != 0 || $(this).val( 4 );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="ddl1">
<option value="0">number</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>
<option value="8">8</option>
</select>

You should call this function on change, not click - else, like you said, as soon as you click an option is selected.
$('#ddl1').change(function () {
DEMO
Edit: You should use a class to give the feel of the default option, you don't actually want it set to selected EACH time the user clicks:
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" class="default">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
.default {
color: blue;
}

is this what you're looking for? http://jsfiddle.net/swm53ran/84/
$(function () {
var defaultValue = "4";
var count = 0;
$('#ddl1').click(function () {
if (count < 1) {
$('#ddl1').val(defaultValue);
count++;
}
});
});

jQuery select box with respect to the change event

I have a dropdown that will change with respect to the first value (i.e from_value).
What I'm trying to do is. There will be numbers from 1 to 10.
So if the first value is selected as 2, then the second value (i.e to_value) should be populated with 2 to 10 in the dropdown.
Below is my code and I'm not sure to run the loop here. Could someone help me in running the loop and do my task.
In other words - If the first drop down is selected with value 2, then the second dropdown should populate with 2,3,4,5,6,7,8,9,10
If the first dropdown is selected with 8, then the second dropdown should show 8,9,10
$("#from_value").change(function(){
var from_value = $("#from_value").val();
$("div.to_value").html('<label>To Value</label><select name="to_value" id="to_value"><option>'+ from_value +'</option></select>');
});

try
HTML
<select id="from_value">
<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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="to_value">
<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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
JS
$("#from_value").change(function () {
var val = +this.value;
$("#to_value option").hide();
$("#to_value option:gt(" + val + "),#to_value option:eq(" + val + ")").show();
$("#to_value").val(val);
});
DEMO

Hope you are getting value in from_value.
Then you could try this
$("#from_value").change(function() {
var from_value = $("#from_value").val();
var opts = '';
for(var i = from_value; from_value <=10; i++)
{
opts = opts+'<option>' + i + '</option>';
}
$("div.to_value").html('<label>To Value</label><select name="to_value" id="to_value">' + opts + '</select>');
});

JS get Maximum Value and Selected Value of Drop Down List

I have a series of Drop down list in my page which has different values like some has values Starting like "NA, 1,2,3 to 100" other has "NA, 1 ,2,3 to 50" and other have different ending value but all are starting with "NA"
i am writing code to find the sum of the values selected and percentage of each value in JS.
The sum I got it the addition of selected values but percentage I am not getting. I want to fetch the maximum value of the selected drop down list.
JS Function
function sum() {
var result = 0;
var sval = 0;
for (var f = 1; f<= 5; f++) {
var sval = document.getElementById('ddlist_'+f).value;
if(!isNaN(sval)) {
var sval = parseFloat(sval);
result = result + sval;
}
}
}
}
window.onload = sum;
Total Value of the Selected List is in Var Result.
I want to find the Maximum value of all list
Example Drop Down list
<option value=NA> NA </option><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><option value="5">5</option>
<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option>
<option value="18">18</option><option value="19">19</option>
<option value="20">20</option><option value="21">21</option><option value="22">22</option>
<option value="23">23</option><option value="24">24</option><option value="25">25</option>
output
<span id="maxtotal " style="color:#06F; font-weight:bold;"></span>
In short, when Drop down list selected, I want to fetch the Selected Value and Last which is Maximum value of the Drop down List.
Thanks you

You can access the options collection of an HTMLSelectElement object like an array.
function sum() {
var $ = function (str) { return document.getElementById(str); },
f, ddlist, sval, mval,
result = 0, maxtotal = 0, percent;
// try 'ddlist1', 'ddlist2', .. and so on
f = 1;
while (ddlist = $('ddlist' + f++)) {
sval = ddlist.options[ddlist.selectedIndex].value;
mval = ddlist.options[ddlist.options.length - 1].value;
if ( !isNaN(sval) && !isNaN(mval) ) {
result += parseFloat(sval);
maxtotal += parseFloat(mval);
}
}
percent = (maxtotal > 0) ? result / maxtotal * 100 : 0;
$('maxtotal').innerHTML = result + ' of ' + maxtotal;
$('totalper').innerHTML = percent.toFixed(2) + ' %';
}

I think this is what you want to acomplish: http://jsfiddle.net/jK5Uq/
There is no trick here, I barely change anything to your code (the original version) but the html part:
<select id='ddlist_1' onchange='sum()'>
<option value=NA> NA </option>
<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>
<select id='ddlist_2' onchange='sum()'>
<option value=NA> NA </option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id='ddlist_3' onchange='sum()'>
<option value=NA> NA </option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
<select id='ddlist_4' onchange='sum()'>
<option value=NA> NA </option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
<p id="maxtotal" />
<p id="totalper" />