I have multiple dropdowns where people can select opening times for a store and I need to make it easy for people to enter the value in the first dropdown and then click to copy across all days;
Basically an onclick;
Copy selected value in monfrom and monto and assign values to other dropdowns.
<select name="monfrom" id="monfrom">
<option value="00:30">00:30</option>
<option value="01:30">01:30</option>
<option value="02:30">02:30</option>
</select>
<select name="monto" id="monto">
<option value="00:30">00:30</option>
<option value="01:30">01:30</option>
<option value="02:30">02:30</option>
</select>
<a href='#' onclick='JavascriptCode()'>Apply to all</a>
I hope someone can help.
You can use this, using plain javascript:
Javascript
function applyAll() {
var monfrom = document.querySelectorAll('select[name$="from"]');
var monto = document.querySelectorAll('select[name$="to"]');
for (i = 0; i < monfrom.length; i++) {
monfrom[i].value = monfrom[0].value;
};
for (i = 0; i < monto.length; i++) {
monto[i].value = monto[0].value;
};
};
window.onload = function () {
var apply = document.getElementById('apply');
apply.addEventListener('click', applyAll);
};
HTML
<select name="monfrom" id="monfrom">
<option value="00:30">00:30</option>
<option value="01:30">01:30</option>
<option value="02:30">02:30</option>
</select>
<select name="monto" id="monto">
<option value="00:30">00:30</option>
<option value="01:30">01:30</option>
<option value="02:30">02:30</option>
</select>
<button type="button" id="apply">Apply to all</button>
Demo
Since you seem to have jQuery, you can use this (although it's not faster):
function applyAll() {
var monfrom = $('select[name$="from"]');
var monto = $('select[name$="to"]');
monfrom.val(monfrom[0].value);
monto.val(monto[0].value);
};
$(function () {
$('#apply').on('click', applyAll);
});
Related
I have a example code here:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to swap se1 and se2 . Here is my code i tried:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
It's work but it require Jquery 1.2.3 but i want to use Jquery 2.1.3. If i change script url to "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" but it isn't work
Thanks for help!
You shouldn't be swapping the values or the text of the two selected items in the lists. You just need to swap which item is selected in each list. Once that is done, that option will have whatever value the list has set up for it.
The version of JQuery you use here doesn't matter since what you are doing requires JQuery operations that have been in JQuery since the beginning.
var sel1 = $("#se1");
var sel2 = $("#se2");
function swap() {
let selection1 = sel1[0].selectedIndex; // Store the first list's selection
sel1[0].selectedIndex = sel2[0].selectedIndex;
sel2[0].selectedIndex = selection1;
// Test
console.log(sel1.val(), sel2.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I am trying to get (or show) values from Multiple Select using only Javascritpt. Let's say, the user can select multiple options from here, and when they click the 'Show Select' button they can see what are the values of these options.
I took the idea about 'selected' attribute from here
But, the code didn't work. Any help?
<select id ="selectOptions" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="myFunction()">Show Selects</button>
<script>
function myFunction()
{
var numOfOptions = document.getElementById("slectOptions").options.length;
var n=0;
for (n=0; n<numOfOptions; n++)
{
// I tried to use a for loop that will go around from option 0 to 3,
//and through 'selected' attribute wanted to check the condition if the option is selected then only show the values
// I still couldn't figure out if the loop is working at all
if (document.getElementById("slectOptions")[n].selected)
{
var x = document.getElementById("slectOptions").value;
window.alert(x);}
}
}
Just use
var select = document.getElementById("selectOptions");
console.log(select.selectedOptions);
Iterate over the options and check checked property. Although there is a simple type in your selector where missing e in the string.
function myFunction() {
var options = document.getElementById("selectOptions").options;
for (var n = 0; n < options.length; n++) {
if (options[n].selected) {
console.log(options[n].value);
}
}
}
<select id="selectOptions" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="myFunction()">Show Selects</button>
Or use readonly selectedOptions property to get the collection of selected options.
function myFunction() {
var options = document.getElementById("selectOptions").selectedOptions;
for (var n = 0; n < options.length; n++) {
console.log(options[n].value);
}
}
<select id="selectOptions" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="myFunction()">Show Selects</button>
<!DOCTYPE html>
<html>
<script>
function eraseText() {document.getElementById("txtChoices").value = "";
}
function SetMulti() {var txtChoices = document.getElementById("txtChoices"); txtChoices.value += document.getElementById("choiceNames").value;
}
</script>
</head>
<body>
<input type="text" id="txtChoices" readonly="readonly" placeholder="Multiple choice"/></br>
"Variable" Choice dropdown:
</br>
<select multiple="" name="choiceNames" id="choiceNames">
<option value="Long, ">Long, </option>
<option value="Short, ">Short, </option>
<option value="Red, ">Red, </option>
<option value="Curly, ">Curly, </option>
<option value="Straight, ">Straight, </option>
</select>
<button onclick="SetMulti()">Add</button>
<button onclick="eraseText()">Reset</button>
</body>
</html>
I have a var in js like this :
var string =
"<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="1">D</option>
<option value="2">E</option>
<option value="3">F</option>
<option value="1">G</option>
<option value="2">H</option>
<option value="3">I</option>
<option value="1">K</option>
<option value="2">L</option>
<option value="3">M</option>"
And i would like to create a code which parse it/do a filter, in order to keep in a new var only option with val= value i choose.
So the result i would like to obtain for exemple for value=1 is following :
"<option value="1">A</option>
<option value="1">D</option>
<option value="1">G</option>
<option value="1">K</option>"
Do you have an idea how to do?
Thanks a lot !
You can pass the string to the jQuery and use .filter() method.
var filteredElements = $(string).filter('[value=1]');
In case that you want a string representation of the elements:
var filteredString = $('<select/>').html(string).find('option').filter(function() {
return this.value !== '1';
}).remove().end().end().html();
You would be better keeping that as a set of jQuery elements:
var $options = $(string);
and then using jQuery methods to get the ones you want:
var $wanted = $options.filter(function() {
return this.value == 1;
});
See http://jsfiddle.net/alnitak/7ThYU/
Try this.
var string =
"<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="1">D</option>
<option value="2">E</option>
<option value="3">F</option>
<option value="1">G</option>
<option value="2">H</option>
<option value="3">I</option>
<option value="1">K</option>
<option value="2">L</option>
<option value="3">M</option>"
var elements = $(string);
var requiredelements = elements.filter("option[value=1]").html();
I have 3 dropdown boxes, in which there are values of 10 to 100. I want user to select cumulative value of 100 from all dropdown boxes.
Which means, if I select 20 from the first dropdown box the next 2 dropdown should be left with the options of selecting total of 100
What I have done so far is here: CHECK IT HERE (JS FIDDLE)
HTML
<select id="foreign" class="me">
<option value="">Foreign Policy</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<select id="economy" class="me">
<option value="">Economy Policy</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<select id="social" class="me">
<option value="">Social Policy</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<br />
<span id="message"></span>
JavaScript
/*var total = new Array();
$('#foreign option').each(function() {
total.push($(this).val());
});
console.log(total);*/
var total = 100;
var ids = ['foreign', 'social', 'economy'];
var current_selected;
$('.me').change(function() {
current_selected = $(this).attr('id');
var socval = $('#' + current_selected + ' option:selected').val();
total = total - socval;
if ($.inArray($(this).attr('id'), ids) > -1) {
ids.splice($.inArray($(this).attr('id'), ids), 1);
}
for (var i = 0; i < ids.length; i++) {
$('#' + ids[i] + ' option').each(function() {
if ($(this).val() >= total) {
$(this).attr('disabled', true);
} else {
$(this).attr('disabled', false);
}
});
}
if (total <= 0) {
total = 100;
}
console.log(total);
ids.push(current_selected);
});
It is pretty much working, with some minor faults.
UPDATE
I think I solved it.
SOLVED FIDDLE
Thanks who helped.
Regards
Changing:
if ($(this).val() >= total) {
to
if ($(this).val() > total) {
solves the problem of only being able to select upto 90%
Working sample
Update
With regard to changing values, i'd probably take a forward-looking approach and reset the value of the forward selects. Something like:
var selectIds = ['first', 'second', 'third']
$('select').change(function(){
var currentIndex = $.inArray($(this).attr('id'), selectIds);
for(var i = currentIndex + 1; i < selectIds.length; i++)
{
$('#' + selectIds[i]).val("0");
}
});
This basically resets the value of select items in the chain that are further ahead than the current select box being used.
Working example
You'll also want to look ahead when doing the disables. You should only be disabling items in the select lists further down the chain from the current select. The first select list should always be able to choose any value and the following selects filtered based on that. This fits in well with the above approach.
I did another version of your code, plus fixing the bug
http://jsfiddle.net/rzBej/62/
$('.me').change(function() {
var totalSoFar = 0;
$('.me').each(function() {
totalSoFar += +$(this).val();
});
var tmp = 100 - totalSoFar;
$('.me').each(function() {
var $this = $(this);
$this.find('option').each(function() {
$this.prop('disabled', $this.attr('value') > tmp);
});
})
});
As the title says, I'm wondering if there's a way to change the value of html items that are generated by jquery. Here's the code that I currently have:
the javascript
<script type="text/javascript">
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++)
$(".row:first").clone(true).insertAfter(".row:last");
$('#dateDueMonth['+i+']').val(curentMonth + 1);
})
});
</script>
My thought here was that after the row was cloned, I could then change the dropdowns content based upon it's current name, but obviously that's not working, and I've been unable to find a way to "hook" into dynamic html content.
and the base html
<select id="months" name="months">
<option selected 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>
</select>
</td><div id="showRows"><div class="row" id="row[]"><td class="td_alt"><select id="dateDueMonth[]" name="dateDueMonth[]" >
<option value="0">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option selected value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="dateDueYear[]" name="dateDueYear[]">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected value="2011">2011</option>
</select>
Now the generation of dynamic html and form submission works great. Gives me the data that I can use for my back end code. However having it so that I can increment the values in the various dropdowns as I see fit would make data entry by the folks using this page a whole lot easier, hence the issue.
To all that reply, thanks for your help with this jquery/JS noob.
EDIT: For this what I want to have is a form that can spawm multiples copies of the first line encased within the showRows div. When this is submitted, I want it to be able to collect that information in arrays for each select/input statement for the rows that are generated. For example if I selected two months, dateDueMonth, dateDueYear, and amount would be arrays in my form that would have two entries each. The current code does this, but by default it has the default elements for the dropdown menus set the same as the row of HTML that it is cloning.
Not sure what you want to do, but it should work like this
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
var arr;
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++)
arr=[$(".row:first").clone(true).insertAfter(".row:last")];
$('#dateDueMonth['+i+']').val(curentMonth + 1); //don't know why its here
arr[0].text("your value"); //apply the index you wanna change
})
});
Are you trying to achieve this kind of markup? Demo
<div id="showRows"><div class="row" id="row[0]"><select id="dateDueMonth[0]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>
<select id="dateDueYear[0]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>
</div><div class="row" id="row[1]"><select id="dateDueMonth[1]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>
<select id="dateDueYear[1]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>
...
This may be what you need. See my demo linked above.
for (var i = 1; i <= this.selectedIndex; i++) {
row = $(".row:first").clone(true)[0];
row.id = "row["+i+"]";
$(row).find("[id^='dateDueMonth']").attr("id","dateDueMonth["+i+"]").val((curentMonth + i) % 12 + 1);
$(row).find("[id^='dateDueYear']").attr("id","dateDueYear["+i+"]");
$(row).insertAfter(".row:last");
}
you cannot use ids as array in JavaScript. if you want, you have to put array index as well when you create element. or else just access the select element as bellow
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++) {
$(".row:first").clone(true).insertAfter(".row:last");
$('.row:last select').val(curentMonth + 1);
}
})
});
Working sample