In my PHP page I have some dropdown menu like this one:
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<?php echo $categories ?>
</select>
</label>
</div>
</div>
I wish to create a button able to change the category one time for all my dropdown.
How could I create a button to toggle select all my dropdown menu at once using jQuery or Javascript?
"No, I wish to create a new dropdown menu for toggle all other dropdown menus option at once. – Simone"
This jQuery code changes values using HTML value="" not what's written inside the <option> tags - that would allow making mistakes too easily. Let me know if this is what you were looking for.
Cheers!
$(".master").change(function() {
var master = $('.master').val();
var peasants = $('.option');
peasants.each(function() {
peasants.val(master);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='master'>
<option value="0">Master</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
Are you trying to create a Reset button something like below?
$("#mybtn").on("click",function(){
$(".option").each(function(){
$(this).val(0)}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>
<select name='subcat' class='option'>
<option value="0">Select</option>
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
</label>
</div>
</div>
<button id="mybtn">Reset</button>
Related
I am trying to grap all selected values from a page and push them into an array.
I have tried the following:
values = $.map(answers ,function(option) {
return option.value;
});
//it was working at somepoint, but apparently not anymore. is there a easier way to get this accomplished?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
<div class="input-field select2">
<p>q2</p>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="2">a</option>
<option value="5">b</option>
<option value="7">c</option>
<option value="10">d</option>
<option value="12">e</option>
</select>
<!-- <label>Materialize Select</label> -->
</div>
<div class="input-field select3">
<p>What do you Find More Interesting?</p>
<select>
<option value="" disabled selected>a</option>
<option value="1">b</option>
<option value="3">c</option>
</select>
</div>
I'm having a hard time with this, basically I have 2 Select with same options. The 2 Select Inputs named as registrationdiscounttype1 and registrationdiscounttype2
So First I choose a discount for registrationdiscounttype1 then if I will add a discount for registrationdiscounttype2 if the option is already selected in discount number 1 it will show an error that will say the discount is already selected.
I've already made a javascript based on what I've search so far, but I can't make it work, can you help me what is wrong with my code, or what should I use?
This is the sample photo
// Change in Discount 2
$("#registrationdiscounttype2").unbind('change').bind('change', function()
if ($('#registrationdiscounttype2').closest('table').find('option[value=' + $('#registrationdiscounttype1').val() + ']:selected').length > 1)
{
alert('Discount is already selected, Please choose another one');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
u can try
$(document).ready(function(){
$("#registrationdiscounttype2").unbind('change').bind('change', function() {
if ($('#registrationdiscounttype2').val() == $('#registrationdiscounttype1').val())
{
alert('Discount is already selected, Please choose another one');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
<div class="form-group" id="result">
</div>
Here you go with an example solution (if select element are siblings) https://jsfiddle.net/pvchxyup/1/
$('select').change(function(){
if($(this).val() === $(this).siblings('select').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
If your element are not siblings, then follow https://jsfiddle.net/pvchxyup/2/
$('select').change(function(){
if($('#select1').val() === $('#select2').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="select1">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
</div>
<div>
<select id="select2">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
</div>
No need to use bind, simple and easy way to do that.
Try this:
$("#registrationdiscounttype2").change(function(){
if($(this).val()==$('#registrationdiscounttype1').val()){
alert("Already Selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>
I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/
No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!
I am trying to append the select value for each div to its heading. How can I grab the value within each div then append it?
I want to append this on page load and not wait until a click or change takes effect. Here is a jsfiddle https://jsfiddle.net/dqfvyvdt/2/
Markup: Repeated multiple times and each box will have a different selected value.
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option selected="selected" value="car">Car</option>
<option value="car">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
JS:
var title = $('.module').find('h3');
var type = $('.module').find('.type').val();
$(title).append(type);
$('.module').find('.type').val() gets the value of the first type element, you need to find the value of each type in relation to the h3 element.
So you need to iterate over the h3 and find each one's type value and add it to its contents
Use .append()
$('.module h3').append(function(i, text){
return $(this).next().val()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
If you want to update the content of change also then
$('.module .type').change(function(i, text) {
var $this = $(this);
$this.prev().find('.h3-type').text($(this).find('option:selected').text());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
I am trying to make the default value different than what is defined in the HTML. I cannot change the HTML because it is locked by a parent company of ours. I can however change the default if I use javascript. Here is the HTML
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>
Now how would I make the Office value the default only using javascript?
Simply use that one line of javascript below to change the value on runtime
document.getElementById('addressListArray[0].addressTypeString').value = 'Office';
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>
!function(){var e=document.getElementsByTagName("option");e[0].selected=!1,e[1].selected=!0}();
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required>
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option>
</select>
</div>
</div>
Select the dropdown and use .val(). If its a dynamic id then add another attribute like data-dropdown="list" as I have done below
$("select[data-dropdown='list']").val('Office');