this seems like something that should be incredibly easy to do but it's early in the morning and I'm drawing a blank.
I have a select that contains % values (for zooming) and as well as having this as a dropdown I want to have two buttons (+ and -) to iterate through the list.
So assuming I had:
<button id="minusButton">-</button>
<select id="zoomSelect" onchange="zoom()">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="50">50%</option>
<option value="100" selected="selected">100%</option>
</select>
<button id="plusButton">+</button>
How would I go about switching up and down the select each time a button is pressed. Also ensuring it stops nicely on 100% and 10% (ie, no wrapping round or throwing an error if I keep pressing +).
Thanks very much!
$(document).on('click', '#minusButton', function() {
var selIndex = $("#zoomSelect").prop('selectedIndex');
if (selIndex != 0) {
$("#zoomSelect").val($('#zoomSelect option').eq(selIndex - 1).val());
zoom();
}
});
$(document).on('click', '#plusButton', function() {
var selIndex = $("#zoomSelect").prop('selectedIndex');
if (selIndex != $('#zoomSelect option').length - 1) {
$("#zoomSelect").val($('#zoomSelect option').eq(selIndex + 1).val());
zoom();
}
});
function zoom() {
console.log('zoomed');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="minusButton">-</button>
<select id="zoomSelect" onchange="zoom()">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="50">50%</option>
<option value="100" selected="selected">100%</option>
</select>
<button id="plusButton">+</button>
Click event can be written as such so as to change the value of select box, and trigger the zoom function accordingly.
You can use selectedIndex to work with the selected item like
var $zoom = $('#zoomSelect'),
len = $zoom.find('option').length;;
jQuery('#plusButton, #minusButton').click(function() {
var op = (this.id === 'minusButton' ? -1 : 1);
$zoom.prop('selectedIndex', function(idx, value) {
var x = value + op;
return x < 0 || x > len - 1 ? value : x;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="minusButton">-</button>
<select id="zoomSelect" onchange="zoom()">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="50">50%</option>
<option value="100" selected="selected">100%</option>
</select>
<button id="plusButton">+</button>
Pure JS answer
Basically you need to get selectedIndex and set that index.
document.getElementById("zoomSelect").selectedIndex will get what index is currently selected and you can set that based on Plus or Minus click.
function zoom(isPlus) {
var zoomSelect = document.getElementById("zoomSelect");
var index = zoomSelect.selectedIndex;
var length = zoomSelect.length;
if (isPlus && (index < length - 1)) {
zoomSelect.selectedIndex = index + 1;
} else if (!isPlus && (index > 0)) {
zoomSelect.selectedIndex = index - 1;
}
}
<button id="minusButton" onclick="zoom(false)">-</button>
<select id="zoomSelect" onchange="zoom()">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="50">50%</option>
<option value="100" selected="selected">100%</option>
</select>
<button id="plusButton" onclick="zoom(true)">+</button>
Found a duplicate of this with an answer - Choose option from select list using next/previous button with jquery
So this can be closed.
Related
I have a dropdown menu with products similiar like this
<select class="fruits" >
<option value="1" >Oranges</option>
<option value="2" >Bananes</option>
<option value="3" >Apples</option>
</select>
I need to remove options by its value. How to do that ?
Pure JavaScript please.
EDIT : I know that I need to use element.removeChild(child) method. But how to reference child by its value. Thats my point.
EDIT 2 : I use the script of zdrohn below and it works. Because I have several fruits dropdowns with the same collection I need to iterate trough all dropdowns and delete it from all dropdowns. This is my code now :
<script type='text/javascript'>
var id = 3;
var el= document.getElementsByClassName("fruits");
for (i=0;i<el.length;i++) {
for(var n = 0; n < el[i].length; n++) {
if(el[i][n].value == id) {
el[i][n].remove();
}
}
</script>
Though it works I wonder about that I do not need to use the parent.removeChild() method. How comes ?
P.S. I wonder that peole vote this question down. As the response shows their are several solutions. Though not all are sufficiantly explained.
Here is a snippet to play with.
The code removes the option with value = 3
window.onload = function() {
var optionToDelete = document.querySelector("select.fruits > option[value='3']");
optionToDelete.parentNode.removeChild(optionToDelete);
}
<select class="fruits">
<option value="1">Oranges</option>
<option value="2">Bananes</option>
<option value="3">Apples</option>
</select>
EDIT: Based on the updated question - I have several fruits drop-downs.
We could make use of querySelectorAll to select all matching elements and forEach to apply the desired logic on each element in the selected list.
window.onload = function() {
var optionsToDelete = document.querySelectorAll("select.fruits > option[value='3']");
optionsToDelete.forEach(function(element, index, array) {
element.parentNode.removeChild(element);
});
}
<select class="fruits">
<option value="1">Oranges</option>
<option value="2">Bananes</option>
<option value="3">Apples</option>
</select>
<select class="fruits">
<option value="1">Seville oranges</option>
<option value="2">Burro Bananes</option>
<option value="3">Baldwin Apples</option>
</select>
<select class="fruits">
<option value="1">Bergamot oranges</option>
<option value="2">Red Bananes</option>
<option value="3">Gravenstein Apples</option>
</select>
<select class="fruits" >
<option value="1" >Oranges</option>
<option value="2" >Bananas</option>
<option value="3" >Apples</option>
</select>
<script type='text/javascript'>
var valueToRemove = 1;
var select = document.getElementsByClassName('fruits');
for(var i = 0; i < select[0].length; i++) {
if(select[0][i].value == valueToRemove) {
select[0][i].remove();
}
}
</script>
Edit:
<select class="fruits" >
<option value="1">Oranges</option>
<option value="2">Bananas</option>
<option value="3">Apples</option>
</select>
<br>
<label>Input value to delete</label><input type='text' id='delete_value'>
<button onclick='remove(document.getElementById("delete_value").value)'>Delete</button>
<script type='text/javascript'>
function remove(item) {
var valueToRemove = item;
var select = document.getElementsByClassName('fruits');
for(var i = 0; i < select[0].length; i++) {
if(select[0][i].value == valueToRemove) {
select[0][i].remove();
}
}
}
</script>
You can select the desired option by using document.querySelector() and a selector of this form
A more complete list of selectors can be found here
Example
var element = document.evaluate( '//option[#value="1"]' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
element.parentNode.removeChild(element)
I have a website that I currently can tell how many answers from the various dropdown menus have been selected. Now I want to be able to count the comments made that are inside the textarea tag. I have a js fiddle for what I basically have.
https://jsfiddle.net/josephmckenzie/Lr1evv3v/3/
When you click the comment link it will open an accordion with a comment box under the current dropdown, and once entered they go on to next question. They should both count up (dropdown counter works already), and if a comment is entered in conjunction with the menu selection, the comment counter should count up as well.
<div class="QuestionsAnswered">
summary<br>
Total = <span class="cnt-total">0</span> <br>
</div>
<select name="firstone">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="na">N/A</option>
</select>
<div class="accordion">Comment</div>
<div class="panel">
<textarea name="comment<%=index%>" rows="4" cols="15"></textarea>
</div>
<select name="secondone">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="na">N/A</option>
</select>
the js
$('select').change(function() {
// get all selects
var allSelects = $('select')
var total = 0;
// for each select increase count
$.each(allSelects, function(i, s) {
// increase count
if($(s).val() == 'Yes' ) { total++; }
if($(s).val() == 'No') { total++; }
if($(s).val() == 'na') { total++; }
});
$('.cnt-total').text(total);
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
};
I've tried changing the select to text area and the .val != to a blank string and a few other things but alas I come to you Stack
Make sure 'total' is a global variable, so take it out of your $(.'select').change(function()) (https://jsfiddle.net/Lr1evv3v/7/).
$("#the_answer").on("blur", function(){
$(this).val() ? total++ : total--;
$('.cnt-total').text(total); //to update the total text
});
I hope I can explain this well. Note the attached image below. Each has a classname of "classtime" and contains a list of available schedules for a class.
As you can see in the "instructions" in the image, I need to validate that a user doesn't select classes on back-to-back days. I'm not sure how to do this in jQuery; I'm fairly sure it can be done, and probably easily, but I don't know how.
So the plan is to act on the change() event of a given drop-down, and then look at the value of the select before and the select after, and if the value is not 0, complain to the user and reset the value of the current drop-down to 0.
Thanks!
This is one way with disables.
$('select').change(function(){
var hasVal = $(this).val() != 0;
var index = $('select').index(this);
var total = $('select').length;
//before select
if((index-1) >= 0){
var disableBefore = hasVal;
// check incase 2 before has a value
if(!disableBefore && ((index-2) > 0)){
disableBefore = $('select:eq(' + (index-2) + ')').val() != 0;
}
$('select:eq(' + (index-1) + ')').prop('disabled', disableBefore);
}
//after select
if((index+1) < total){
var disableAfter = hasVal;
// check incase 2 after has a value
if(!disableAfter && ((index+2) < total)){
disableAfter = $('select:eq(' + (index+2) + ')').val() != 0;
}
$('select:eq(' + (index+1) + ')').prop('disabled', disableAfter);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select>
<option value="0">a</option>
<option value="1">aa</option>
</select>
</div>
<div>
<select>
<option value="0">b</option>
<option value="1">bb</option>
</select>
</div>
<div>
<select>
<option value="0">c</option>
<option value="1">cc</option>
</select>
</div>
<div>
<select>
<option value="0">d</option>
<option value="1">dd</option>
</select>
</div>
<div>
<select>
<option value="0">e</option>
<option value="1">ee</option>
</select>
</div>
<div>
<select>
<option value="0">f</option>
<option value="1">ff</option>
</select>
</div>
<div>
<select>
<option value="0">g</option>
<option value="1">gg</option>
</select>
</div>
I have 4 dropdowns from which you have to select an option.
What I am trying to do is show an alert if you chose the same option more than once. Its purpose is to keep the score for a game so a person shouldn't be able to play as 2.
At the moment the dropdown looks like this:
<select id="users_1" aria-labelledby="dropdownMenu1">
<option>Select player</option>
<?php foreach($users as $user) : ?>
<option value="<?=$user['id_user']?>"><?=$user['nume']?></option>
<?php endforeach; ?>
</select>
And what I've tried to do in JQuery is this:
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
And I also tried to compare them like this:
$("#users_2").change(function() {
if($(this).val() == $("#users_1").val()) {
alert($(this).val());
}
});
None seems to work and I have no clue why. I've checked and the actual values are taken from the view but the if clause cannot compare them apparently.
Thank you for any help! Much appreciated!
Get your values, don't set them
Change this…
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
…to this…
$("#users_2").change(function() {
var a = $("#users_1").val();
var b = $(this).val(); // equivalent to $("#users_2").val()
if(a === b) { // Use strict comparison operator as a best practice
alert(a + ' matches ' + b);
}
});
Make it dynamic
You can take it a step farther by listening to a set of elements and making your handler dynamic:
// Listen to set of all select elements.
$('select').on('change', function(e) {
// Serialize form values.
var vals = $('#select_player').serializeArray();
// Convert to simple array of just values.
vals = $.map(vals, function (val, i) {
return val.value;
});
// Remove current selection from array…
vals.splice(vals.indexOf($(this).val()), 1);
// …then check to see if it's value was already there.
if(vals.indexOf($(this).val()) !== -1) { // If value is found,
// …reset current select element to default option,
$(this).val('default');
// …and alert user with a relevant message.
alert('You cannot select this player more than once.');
};
});
label {
display: block;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="select_player" name="select_player">
<label>Player 1:
<select id="users_1" name="users_1">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 2:
<select id="users_2" name="users_2">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 3:
<select id="users_3" name="users_3">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 4:
<select id="users_4" name="users_4">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
</form>
I used the same class on all the dropdowns and then use only one event handler.
$('.dropdown').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.dropdown').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("Alert Alert!")
}
})
In the event handlers I can get the selected value, filter all the dropdowns that match that value and if I get more than 1 dropdown I will just show the alert.
You can check it on fiddle.
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);
});
})
});