We Keep Coding

how to make subcategory required with javascript?

hello everyone i need help.
i need first selected must be select model type and must be required ?
how to make id="subcategory" required ?
required for id="subcategory" not working why ?
<select id="category" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory">
<optgroup class="Volvo">
<option value="">select model type</option>
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab">
<option value="">select model type</option>
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel">
<option value="">select model type</option>
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi">
<option value="">select model type</option>
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
<script>
$('#subcategory').find('optgroup').hide(); // initialize
$('#category').change(function() {
var $cat = $(this).find('option:selected');
var $subCat = $('#subcategory').find('.' + $cat.attr('class'));
$('#subcategory').find('optgroup').not("'"+ '.' + $cat.attr('class') + "'").hide(); // hide other optgroup
$subCat.show();
$subCat.find('option').first().attr('selected', 'selected');
});
</script>

Here is an idea on where I updated slightly the second select to make the select mode type outside the optgroup. You will see that you won't be able to click on send until you select both values.
You can refer to this link to understand my changes:
https://stackoverflow.com/a/6048891/8620333
$('#subcategory').find('optgroup').hide(); // initialize
$('#category').change(function() {
var $cat = $(this).find('option:selected');
var $subCat = $('#subcategory').find('.' + $cat.attr('class'));
$('#subcategory').find('optgroup').not("." + $cat.attr('class')).hide();
$subCat.show();
$('#subcategory option').removeAttr('selected');
$('#subcategory > option').attr('selected', 'selected');
//adding this will make it required
$('#subcategory').attr('required','required')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="category" required>
<option value="" disabled selected>select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory">
<option value="">select model type</option>
<optgroup class="Volvo">
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab">
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel">
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi">
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
<input type="submit" value="send">
</form>

Ignore 1st option from multiple select box-jquery

I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B
My demonstration
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
$('.alert_type').change(function() {
var selected_value=$(this).val();
$(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();
});
But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option
You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception
Fiddle
https://jsfiddle.net/timus2001/rbuyk7na/3/
When I try with
$(".alert_type option").show();
to show all at first it is not mutually exclusive any more (see the picture)

Ok. let me see if I get you this time:
$('.alert_type').change(function() {
var selected_values = [],
iteration;
$(".alert_type option").show();
$(".alert_type").each(function(){
iteration = $(this).find('option:selected').val();
if ( iteration !== "" ) {
selected_values.push( iteration );
}
})
for ( var i = 0; i < selected_values.length; i++ ) {
$(".alert_type option[value='"+ selected_values[i] +"']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

This is what you need:
$('select.alert_type').on('change keyup',function() {
var val = $(this).val();
$('select.alert_type option').prop('disabled',false);
$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
Good luck :D

Disable Option 2 when Option 1 is selected

I need to adapt some code I've used for a website I'm creating for a school I work for, to disallow certain options to be selected at the same time.
The user is presented the following HTML drop down list 6 times:
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
The user should NOT be able to select both Art and Textiles at the same time. They can select EITHER Art OR Textiles - but not both.
For example: User selects 'Art' in opt1, so Textiles is disabled in the remaining 5 menus. If the user goes back and deselects Art, Textiles should then be enabled throughout. Hopefully you understand what I mean.
I already have the code to prevent the same option being selected multiple times:
$(function() {
$('select').change(function(){
if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
The user then clicks submit and all of this is then submit to a MySQL server for review at a later date.
Menus are named opt1, opt2, opt3, opt4, optRes1 and optRes2.
Thanks everyone,
Jack

I use a data attribute named notallowed. There you can set which value that should be disabled. And when a value is changed we also check if we previously disabled some fields and re-enable them.
$('select').change(function(){
var notAllowed = $(this).find('option:selected').data('notallowed');
var currentValue = $(this).val();
// Get the previous selected value.
var oldValue = $(this).data('old');
// Keep track of the previous selected value.
$(this).data('old', currentValue);
// Re-enabled all that was disabled by the previous selection.
if(oldValue) {
// Re-enable the old value in the other selects.
$('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
// Get the option.
var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
if(previousNotAllowed){
$('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
}
}
// If we selected a option with notallowed attribute we should disable that option in the other selects.
if(notAllowed){
var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
}
// Disable the current value in other selects.
$('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>

Try to add a overlapping div with id selection and then select every select and disable the chosen option on change like so:
<div id="selection">
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
</div>
and the script
<script type="text/JavaScript" language="JavaScript">
$( "#optRes2" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes2').val() ){
$(this).attr("disabled","true");
}
});
});
$( "#optRes3" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes3').val() ){
$(this).attr("disabled","true");
}
});
});
</script>

Better create options array, and work with data, not with HTML. Using this approach you will be able to stay DRY.
Think solution is clear.
<html>
<body>
<select type="select" name="optRes3" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<script>
function OptResDropdown(htmlDropdown, value) {
this.value = value;
this.dropdown = htmlDropdown;
this.options = this.initOptions(htmlDropdown.options);
var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
this.value = value? value : (selected ? selected.value : 0);
var me = this;
htmlDropdown.addEventListener('change', function(event){
me.value = event.target.value;
me.update(me.value);
});
this.update();
}
OptResDropdown.instances = {};
OptResDropdown.prototype.initOptions = function(options){
var me = this;
var out = [];
for(var i = 0; i < options.length; i++) {
var option = options[i];
out.push({value: option.value, label: option.innerText});
}
return out;
};
OptResDropdown.prototype.update = function(value) {
for(var key in OptResDropdown.instances) {
var me = OptResDropdown.instances[key];
me.dropdown.innerHTML = '';
var options;
if(value === 'Art') {
options = me.options.filter(function(option){
return option.value !== 'Textiles';
});
} else if(value === 'Textiles') {
options = me.options.filter(function(option){
return option.value !== 'Art';
});
} else {
options = me.options;
}
options.forEach(function(option){
var opt = document.createElement('option');
opt.value = option.value;
opt.innerText = option.label;
me.dropdown.appendChild(opt);
})
me.dropdown.value = me.value;
}
};
var opt1 = new OptResDropdown(optRes1);
var opt2 = new OptResDropdown(optRes2);
var opt3 = new OptResDropdown(optRes3);
OptResDropdown.instances.opt1 = opt1;
OptResDropdown.instances.opt2 = opt2;
OptResDropdown.instances.opt3 = opt3;
</script>
</body>
</html>

selecting the dropdowns having id selector starting with some string

I have five drop downs having the id element named as box_g1, box_g2, box_g3, box_g4 and box_g5. I want to enable all the disabled values in all the combo boxes with id selector starting with box_g.
HTML :
<select name="n1" id="box_g1">
<option value="Default">Default</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n2" id="box_g2" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n3" id="box_g3" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n4" id="box_g4" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n5" id="box_g5" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
JQuery :
$(document).ready(function(){
$("select").change(function(e){
var id = $(this).attr("id");
var value = this.value;
$("select option").each(function(){
var idParent = $(this).parent().attr("id");
if(id != idParent){
if(this.value == value){
this.disabled = true;
}
else if($("#box_g1 option:selected").val()!="Default"){
$("#box_g2").prop("disabled", false);
$("#box_g3").prop("disabled", false);
$("#box_g4").prop("disabled", false);
$("#box_g5").prop("disabled", false);
}else{
/*$("#box_g1").each(function(){
$("#box_g1 option").removeAttr("disabled",false);
});
$("#box_g2").prop("disabled",true).val('Disabled');
$("#box_g3").prop("disabled",true).val('Disabled');
$("#box_g4").prop("disabled",true).val('Disabled');
$("#box_g5").prop("disabled",true).val('Disabled');*/
defaultValues();
}
}
});
});
});
function defaultValues() {
if ($("#box_g1").val() == "Default") {
$("select[id^='box_g']").removeAttr("disabled",false); // added this line to enable all the values in all boxes but they are still disabled.
$("#box_g2").attr("disabled", true).val('Disabled');
$("#box_g3").attr("disabled", true).val('Disabled');
$("#box_g4").attr("disabled", true).val('Disabled');
$("#box_g5").attr("disabled", true).val('Disabled');
} else {
$("#box_g2").attr("disabled", false);
$("#box_g3").attr("disabled", false);
$("#box_g4").attr("disabled", false);
$("#box_g5").attr("disabled", false);
}
}
Can anyone help out on this. Check the function defaultValues(). I have mentioned the comment.

You can enable all the options with:
$('select[id^="box_g"] option').prop("disabled",false);
but the selects will still be disabled due to the lines following in your code

If you want enable all select boxes whos od start whith 'box_g' you can use this
$("select[id^='box_g']").find("option").prop("disabled",false);

Firefox does not support JavaScript (form validation) but IE fully support

this is my code:
function validateFormOnSubmit2(theForm) {
var reason = "";
reason += validateState(theForm.state);
if (reason != "") {
alert("State field need correction:\n" + reason);
return false;
}
return true;
}
function validateState(fld) {
var error = "";
if (fld.value == "") {
error = "Please Select State.\n";
fld.style.background = 'Yellow';
}
return error;
}
call this function when i click on submit button.
<form id="form2" name="form2" method="post" action="state_results.php" onsubmit="return validateFormOnSubmit2(this)">
<select name="state" id="state">
<option selected="selected">Select State...</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
<input name="submit2" type="submit" id="submit2" value="Search!" />

I believe that the problem is that <select> elements do not have a value attribute in all browsers.
You can, however, ask the <select> element for its selected index, and for its options. try something like this:
function validateState(fld) {
var error = "";
var value = fld.options[fld.selectedIndex].value;
if (value == "") {
error = "Please Select State.\n";
fld.style.background = 'Yellow';
}
return error;
}
In addition, you should be sure that the first option "Select State..." has a value attribute, and set it to the empty string:
<option selected="selected" value="">Select State...</option>

function validateFormOnSubmit2(theForm) {
var reason = validateState(theForm.state);
if (reason) { // if there is a reason
alert("State field need correction:\n" + reason);
return false;
}
return true;
}
function validateState(field) {
if (field.value == "") {
field.style.background = 'Yellow';
return "Please Select State.\n";
}
// returns undefined by default
// means: there is no reason
// (the reason is not defined)
}
UPDATED
As for your updated question. The only thing you need to do in order to get it work for dropdowns, is to set the default "Select State..." option's value to '' (empty string).
HTML
<option selected="selected" value="">Select State...</option>
The javascript code stays the same.