Insert in 2 different select only the checked item of checkboxes - javascript

I have various checkboxes with the same name:
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>
Every change status, I wish that in the two select there are only checked values.
Example:
If I check A and C, the 2 SELECT will be:
<select name="S1">
<option value=""></option>
<option value="A">A</option>
<option value="C">C</option>
</select>
<select name="S2">
<option value=""></option>
<option value="A">A</option>
<option value="C">C</option>
</select>
If I uncheck A and check D (So C remain):
<select name="S1">
<option value=""></option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="S2">
<option value=""></option>
<option value="C">C</option>
<option value="D">D</option>
</select>
and so on...

Please check below working snnipet.
$("input[type='checkbox']").on("change",function(){
if($(this). prop("checked") == true){
$("select[name='S1'],select[name='S2']").append('<option value="'+$(this).val()+'">'+$(this).val()+'</option>');
}else{
$("select[name='S1'] option[value='"+$(this).val()+"'],select[name='S2'] option[value='"+$(this).val()+"']").remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>

Try this example: https://jsfiddle.net/mccoe8v6/
$(document).ready(function(){
$(".convocati").click(function(){
var thisVal = $(this).val();
debugger;
if ($(this).is(":checked"))
{
$(".convatiSelect").append($("<option>").attr('value', thisVal).html(thisVal));
}
else{
var option = $(".convatiSelect").find("option[value='" + thisVal + "']").remove();
}
});
});
You may want to sort the options after adding them.

Try This -
$('input[type=checkbox][name^=convocati]').change(function() {
$('select').html('');
var option = new Option("", "");
$('select').append($(option));
$('input[type=checkbox][name^=convocati]:checked').each(function() {
var option = new Option($(this).val(), $(this).val());
$('select').append($(option));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>

You can use following script to make it work as expected
Please find comments in code below added on each step to get your output
$(function(){
//First bind a Change event for all checkbox
$("inputt[type='checkbox']").change(function(){
//We will create on array of values which will hold fresh values of all checkboxes on each change
var values =[];
// Now we will fill our values array and add values for checked checkboxes
$("inputt[type='checkbox']").filter(":checked").each(function(){
values.push($(this).val());
}
);
// Once we get all values which are checked, we just need to create option template like following
var options= "";
for(i=0; i< values.length;i++)
{
options+="<option>" + values[i] + "</option>";
}
// SET INNER HMTL of target select once with option template
$("select[name=S1]").html(options);
$("select[name=S2]").html(options);
});
});
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>
Please check the working Fiddle

To achieve this you can use map() to build an array from the checked checkboxes which contains the required HTML and then set it as the html() of the select() elements. Try this:
$(':checkbox').change(function() {
var html = '<option value=""></option>';
html += $(':checkbox:checked').map(function() {
return '<option value="' + this.value + '">' + this.value + '</option>';
}).get().join('');
$('select').html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
<option value=""></option>
</select>
<select name="S2">
<option value=""></option>
</select>
Note that this is using generic selectors, such as :checkbox and select. In a production environment I'd strongly suggest you give your elements some classes which you can use to identify them more specifically.

Related

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

How display listbox option based on a variable value using jquery?

I have a select box with options now I want to show only those options which value id is greater than the user input value.
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something</option>
<option value="14" hidden>Something</option>
<option value="20" hidden>Something</option>
</select>
this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.
You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
You cn try this:
$(document).ready(function(){
$("#txtUserInput").keyup(function(){
getUserInput(this);
});
});
function getUserInput(_this){
var userInput=parseInt($.trim($(_this).val()));
if(userInput!=null && userInput != isNaN){
$("#dtime option").each(function(){
var option=parseInt($.trim($(this).val()));
if(option!=0 && option<userInput){
$(this).css("display","none");
}
else{
$(this).css("display","block");
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>
<input id="inputData" value="0">
</html>
here is jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});

Disable text input unless a selector option is chosen

I have a selector with a list of options. One of the options is 'other' in which case the user may enter their own option in a textbox below.
How can I make the textbox disabled and greyed out only to become active when the 'other' option is selected?
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
$('#list').change(function() {//on change of select
$('#otherbox').prop('disabled', $('option:selected', this).val() != '4');//check if value is not other then disable
}).change();//call on change manually so on load will run the change event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list" name="Optionlist">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Other</option>
</select>
<br>
<br>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />
Maybe a little something like this:
$(document).ready(function() {
$("#list").change(function() {
$("#otherbox").prop("disabled", this.value != "4");
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
<html>
<head>
<body>
<select onchange="func(this)" id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox" disabled/>
<script>
function func(obj){
document.getElementById('otherbox').setAttribute('disabled',true);
if(obj.value == 4)
document.getElementById('otherbox').removeAttribute('disabled');
}
</script>
</body>
</html>
An implementation without Jquery

How to calculate value from select fields?

I took the example from here http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/, Demo 4
Everything works fine, however I can not figure out how to calculate the sum from select list values and to withdraw at the end of the page. I try to do it with this code but it not work `
<section class="main clearfix">
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
</div>
<input type="text" id="sum">
</section>
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
delay : 40,
rotated : 'left'
} );
});
</script>
<script type="text/javascript">
$("#cd-dropdown").change(function() {
var total = 0;
$.each($(".cd-select") ,function() {
total += parseInt($(this).val());
});
$("#sum").val(total)});
`
Thank you in advance !
$(document).ready(function () {
$(".cd-select").change(function () {
total = 0;
$('.cd-select').each(function () {
if ($(this).val() != "-1") {
total = total + parseInt($(this).val(), 10);
}
});
$('#sum').val(total);
});
});
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
<select id="Select1" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
<select id="Select2" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
</div>
<input type="text" id="sum">
When any select with class 'cd-select' change the sum will be calculated and displayed on the text field
Summation is not being made as you expect because your total variable is reset to 0 every time the event listener is fired. Thus your code will work if you define that variable as global.
Thus what you want is:
var total = 0;
$("#cd-dropdown").change(function() {
$.each($(".cd-select"), function() {
total += parseInt($(this).val());
});
$("#sum").val(total)
});

How can I rewrite this javascript code, so that it will refer to every optionbox?

How can I rewrite this javascript code, so that it will refer to every optionbox (not only the first one)?
<html>
<div id="form123">
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementById("day")
selectmenu.onchange=function(){
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value=="other"){
var entered_date = window.prompt("Enter the date","");
document.getElementById('other').value = entered_date;
document.getElementById('other').text = entered_date;
}
}
</script>
</div>
</html>
So far, dialogbox shows up only when I choose the first optionbox.
I want to dialogbox show up even if I choose another optionbox.
In the future, optionboxes will be added dynamically.
ID must be unique. I suggest to use a function on every select on change event and pass this as parameter like:
function changeDate(obj) {
var chosenoption = obj.options[obj.selectedIndex];
if (chosenoption.value == "other") {
var winProVal = window.prompt("Enter the date", "");
if (winProVal != null) {
obj.options[obj.value].value = obj.options[obj.value].text = winProVal;
}
}
}
<select class="day" name="day" onchange='changeDate(this);'>
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select class="day" name="day" onchange='changeDate(this);'>
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select class="day" name="day" onchange='changeDate(this);'>
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
this refers to the element. Also change ID with class.
IDs are supposed to be unique (so are names). You may define class of elements and change your js accordingly..
<html>
<div id="form123">
<select id="day" name="day" class="day">
<option value="abc" name="abc1" id="abc1">abc</option>
<option value="other" name="other1" id="other1">other...</option>
</select>
<select id="day" name="day" class="day">
<option value="abc" name="abc2" id="abc2">abc</option>
<option value="other" name="other2" id="other2">other...</option>
</select>
<select id="day" name="day" class="day">
<option value="abc" name="abc3" id="abc3">abc</option>
<option value="other" name="other3" id="other3">other...</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementsByClassName("day");
for (var i = 0; i < selectmenu.length; ++i) {
selectmenu[i].onchange=function(){
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value=="other"){
var entered_date = window.prompt("Enter the date","");
this.options[1].value = entered_date;
this.options[1].text = entered_date;
}
}
}
</script>
</div>
</html>

Categories