I've got a group of 16 select boxes in a php mail() form, and I want to disable an option if it's chosen in any other box.
The order of options in the select boxes aren't the same, and the I need the value for the php mail.
I want the user filling in the form to not be able to choose the same option twice or more.
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
Also, further down the website, I want to do the same with another group of 8 select boxes - and they contain some of the same options, but then I want them all to be choosable from the beginning, until an option from one of them get picked.
I know too little about jQuery and JavaScript. Help?
Use .filter to get option-elements having value similar as current value.
$('select').on('change', function() {
$('option').prop('disabled', false); //reset all the disabled options on every change event
$('select').each(function() { //loop through all the select elements
var val = this.value;
$('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
return this.value === val;
}).prop('disabled', true); //disable those option elements
});
}).change(); //trihgger change handler initially!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
Fiddle Demo
Thanks, Rayon.
I finally got it to work flawlessly with this piece of code:
<script type="text/javascript">
$('select[name*="box1"]').change(function(){
$('select[name*="box1"] option').attr('disabled',false);
$('select[name*="box1"]').each(function(){
var $this = $(this);
$('select[name*="box1"]').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
</script>
Related
I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>
I have 3 drop-downs with values: Select, One, Two, Three and following is the HTML.
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
Conditions
First of all the jQuery function should store the current values from all the boxes.
If the user select One from #box1, then it (One) should be disabled from all other boxes, and if Two is selected from #box1 again, then Two is disabled from other boxes and One gets enabled. i.e. the last value is disabled not all the values.
Also to be noted that the user can select from any of the dropdowns whether it is box1/box2 or box3.
EDIT
$(document).ready(function(){
$('#box1').data('pre', $(this).val()); // added this line to get the pre value.
$("select").change(function(e){
var id = $(this).attr("id");
var before_change = $(this).data('pre');
alert(before_change); // alert shows blank values
});
});
I want to do this with jQuery. Please help.
Like this:
$(".dpdown").on("change", function() {
var sel = $(this).val();
$(".dpdown").find("option").prop("disabled", false);
$(".dpdown").not(this).find("option[value='" + sel + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
Try something like this:
var $selects = $('.dpdown').change(function() {
var val = $(this).val();
$selects
.children().prop('disabled', false)
.end().not(this)
.find('[value="' + val + '"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
The idea is that you bind change event to all select boxes. Then when event happens you enable all options from all selectboxes, then you find option with matching value from other selects (other then current this) and disable them.
You code simple :
<script>
$('select').on('change', function() {
$("select option").removeAttr('disabled');
$("select option[value=" + $(this).val() + "]").attr('disabled','disabled')
});
</script>
DEMO
Try something like this:
UPDATED
var $selects = $(".dpdown").change(function() {
var selectedValues = [];
$.each($selects, function(index, select) {
var value = $(select).val();
if (value != "Select") {
selectedValues.push(value);
}
});
$selects
.find("option")
.prop("disabled", false);
$.each(selectedValues, function(index, value) {
$selects
.find("option[value='" + value +"']")
.not(":selected")
.prop("disabled", true);
});
});
Demo
I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>