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>');
});
Related
lets admit we have two selects
<select id=first>
<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>
</select>
<select id=second>
<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>
</select>
I want that the second select should not offer values that are bigger then the selected value in the first select, so if for example in the first select I selected 3 then the second select should offer
<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
So I went like this :
$(#first).on('change', function() {
var min = $(#first).val();
for (let i = 1; i <= min; i++) {
$(#second).append('<option value=' + i + '>' + i + '</option>');
}
});
But this appends options. I want to replace the options.
You can remove all <option> tags first by using .empty() and then append new <option> tags by loop:
$('#first').on('change', function() {
$('#second').empty();
var min = $('#first').val();
for (let i = 1; i <= min; i++) {
$('#second').append('<option value=' + i + '>' + i + '</option>');
}
});
Different approach where you store a set of the options and filter the set to replace existing with
const $storedOpts = $('#second option').clone()
$('#first').change(function(){
const $opts = $storedOpts .clone().filter((i,el) => el.value <= this.value)
$('#second').html($opts);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id=first>
<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>
</select>
<select id=second>
<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>
</select>
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>")
}
I have 3 dropdowns every dropdown has 8 options. Now my goal is to limit the combined value of these 3 dropdowns to 8. So for example if you pick 7 in the first you can only select 1 in the next two if you select 1 in the second you can't select anything in the third.
I am trying to achieve my goal by disabling certain options, but there is a flaw in my logic. I can't change my selected option once I've selected one because I've disabled the options. Anyone knows how I can fix this problem?
Thanks in advance.
Here is a jsfiddle as example of my code:
https://jsfiddle.net/k7krx87L/4/
My jQuery code:
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function() {
$(this).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function() {
$(this).attr("disabled", true);
});
});
You need to have a variable check to see which items to be enabled like
var $selects = $(".options select").change(function() {
var sum = 0;
$selects.each(function() {
sum += +this.value;
});
var rem = 9 - sum;
$selects.each(function() {
var max = +this.value + rem;
$(this).find('option').prop('disabled', function() {
return +this.value > max;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options">
<select name="" id="input_1_5">
<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>
</select>
<select name="" id="input_1_6">
<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>
</select>
<select name="" id="input_1_7">
<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>
</select>
</div>
In your code you have to take ele from loop and it will work
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function(index, ele) {
$(ele).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function(index, ele) {
$(ele).attr("disabled", true);
});
});
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++;
}
});
});
i have a select option which works fine,but what i want is if more than one is selected then 10 % discount has to be added, how can this be done
and on selected the value multiplies in Java script
//javascript
function totprice(f,n,amt)
{
var tot=0;
document.getElementById('lbl_tot'+n).value=amt*f;
for (var k=1; k<=document.getElementById('rowcnt').value; k++)
{
if(document.getElementById('lbl_tot'+k))
{
tot=parseInt(tot) + parseInt(document.getElementById('lbl_tot'+k).value);
}
}
document.getElementById('txttot').value=tot;
document.getElementById('txttotprice').value=tot;
}
HTML
<select name="amt" id="amt" onchange="return totprice(this.value,2,110);">
<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>
</select>
Your select tag should be
<select name="amt" id="amt" onchange="return totprice(this.value,2,110);" multiple>
To make it multi select. Now when user will select multiple options (using Shift+click) then in your JavaScript function get these values and do the processing (provide discount/ any logic)
Updated
You wish to multiply the value the user has selected with the discount amount (110)
In your JS have this
var x = parseInt(f)*parseInt(amt);
If f = 2 and amt = 110 then x = 220. You need to do parseInt(value, radix) by default radix is 10
EXAMPLE:
var optionSelected = document.getElementById('amt').value; //optionSelected is nothing but this.value
if(optionSelected > 1)
{
//Offer discount
var x = parseInt(f)*parseInt(amt); //where f and amt is passed through function call
}
else
{
// Do nothing/ other logic
}
Hope this helps!!