We Keep Coding

Show dropdown value based on previous selection

Is it possible for me to only display the related data on my second dropdown option when I click it on my first dropdown? I saw a similar question on stackoverflow, but I can't get it to work. The link is available here. It works when I copy and paste the code from the solution into my system. However, when I tried it on my code, it did not work.
Here's the flow:
If DEPARTMENT is equals to Grade School then Grade & Section, dropdown will only show the Kindergarten to Grade 6 and then if DEPARTMENT is equals to Junior High School, dropdown will only shows Grade 7 to Grade 10 while if DEPARTMENT is equals to Senior High School, dropdown will only shows Grade 11 to Grade 12.
User interface:
Here's the code that I'm using..
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<div class="input-group mb-3" id="dept">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select category" id="dept" name="dept" required>
<option value="" disabled selected>Choose...</option>
<option value="GS">Grade School</option>
<option value="JHS">Junior High School</option>
<option value="SHS">Senior High School</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Grade & Section (for students only)</label>
<div class="position-relative">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select operator" id="u_grdsec" name="u_grdsec">
<option value="" disabled selected>Choose...</option>
<option value="Grade 1" class="GS">Grade 1</option>
<option value="Grade 2" class="GS">Grade 2</option>
<option value="Grade 7" class="JHS">Grade 7</option>
<option value="Grade 8" class="JHS">Grade 8</option>
<option value="Grade 11" class="SHS">Grade 11</option>
<option value="Grade 12" class="SHS">Grade 12</option>
</select>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).on('change', '.category', function () {
var val = $(this).val().toLowerCase();
$('.operator option').hide();
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
</script>
Here's the screenshot of my database.

A quick fix to a minor problem
The problem is a very minor one that is difficult to spot, but very easily fixed.
The department field values in your database are uppercase, but the script tries to match to lowercase. So there is never a match and script hides all of your grade options.
To fix this problem, change the following line of code as shown:
var val = $(this).val().toLowerCase(); // incorrect
change that to:
var val = $(this).val().toUpperCase(); // correct
Yes, it is that simple! You were very close, but just needed a little help spotting the bug. ;)
You can run the snippet below to see your code working.
Addendum:
There's one other (optional) change you might want to make. Append a "removeAttr" to the following line. This will clear the previous selection when a different department is selected.
$('.operator option').hide().removeAttr("selected");
$(document).ready(function () {
$(document).on('change', '.category', function () {
// var val = $(this).val().toLowerCase(); // <----- HERE IS THE PROBLEM
var val = $(this).val().toUpperCase();
$('.operator option').hide().removeAttr("selected");
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<div class="input-group mb-3" id="dept">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select category" id="dept" name="dept" required>
<option value="" disabled selected>Choose...</option>
<option value="GS">Grade School</option>
<option value="JHS">Junior High School</option>
<option value="SHS">Senior High School</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Grade & Section (for students only)</label>
<div class="position-relative">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select operator" id="u_grdsec" name="u_grdsec">
<option value="" disabled selected>Choose...</option>
<option class="GS">Kindergarten</option>
<option class="GS">Grade 1</option>
<option class="GS">Grade 2</option>
<option class="GS">Grade 3</option>
<option class="GS">Grade 4</option>
<option class="GS">Grade 5</option>
<option class="GS">Grade 6</option>
<option class="JHS">Grade 7</option>
<option class="JHS">Grade 8</option>
<option class="JHS">Grade 9</option>
<option class="JHS">Grade 10</option>
<option class="SHS">Grade 11</option>
<option class="SHS">Grade 12</option>
<!-- PHP and DB disabled for this example
<?php
$conn = OpenCon();
$sql = "SELECT * FROM `grdlvl`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<option value="<?php echo $row['g_grdsec']; ?>" class="<?php echo $row['g_dept']; ?>"><?php echo $row['g_grdsec']; ?></option>
<?php
}
}
?>
-->
</select>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I went through the previous question you had and decided to simply use the example that was created in that question - but inside a codepen that works.
https://codepen.io/Stoffe91/pen/YzYpwNO
HTML below:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<select class="category">
<option val="price">Price</option>
<option val="weight">weight</option>
<option val="size">Size</option>
<option val="dimension">Dimension</option>
</select>
<select class="operator">
<option val="1" class="price">For Price 1</option>
<option val="2" class="price">For Price 2</option>
<option val="3" class="price">For Price 3</option>
<option val="4" class="price">For Price 4</option>
<option val="1" class="weight">For Weight 1</option>
<option val="2" class="weight">For Weight 2</option>
<option val="3" class="weight">For Weight 3</option>
<option val="4" class="weight">For Weight 4</option>
<option val="1" class="size">For Size 1</option>
<option val="2" class="size">For Size 2</option>
<option val="3" class="size">For Size 3</option>
<option val="4" class="size">For Size 4</option>
<option val="1" class="dimension">For Dimension 1</option>
<option val="2" class="dimension">For Dimension 2</option>
<option val="3" class="dimension">For Dimension 3</option>
<option val="4" class="dimension">For Dimension 4</option>
</select>
Jquery below:
$(document).ready(function () {
$(document).on('change', '.category', function () {
console.log('now');
var val = $(this).val().toLowerCase();
$('.operator option').hide();
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
Check this one out.
If you're having issues with it, please specify what part of it you're having issues with. Simply apply this on your current project.

HTML Entities Displaying Encoded when Cloned with jQuery

I'm new to jQuery, and while my code does mostly what I want it to (in duplicating a form group), I'm having a couple of issues with the classes/values of the buttons:
When clicked, the .btnadd that is appended to the .formdupgroup loses it's value, rather than having a '+' symbol on it, it displays nothing.
2.When the duplicate .btnadd classes are changed to be .btnremove, they display the HTML entity as text on the button. Rather than a 'x' symbol, they read '×' in full.
I'm sure these issues are related to decoding the HTML entities in both cases, but I can't find a way to work around it, without resorting to just typing the unevenly spaced 'x' and '+' characters. How do I add a decoded HTML entity as the value on my inputs?
$(function(){
$(document).on('click','.btnadd',function(e){
e.preventDefault();
var controlForm = $(this).parents('.formdupgroup:first'),
currentEntry = $(this).parents('.toduplicate:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
newEntry.find('select').prop('selectedIndex',0);
controlForm.find('.btnadd:not(:last)')
.removeClass('btnadd').addClass('btnremove')
.removeClass('btn-success').addClass('btn-danger')
.val('×');
}).on('click','.btnremove', function(e){
$(this).parents('.toduplicate:first').remove();
e.preventDefault();
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<form>
<div class='formdupgroup'>
<div class='form-row toduplicate'>
<div class='col-md-2'>
</div>
<div class='form-group col-md-8'>
<label for='selectexample' class='sr-only'>Select Example</label>
<select name='selectexample' class='form-control'>
<option value='' disabled selected>Please Select an Option</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
<option value='10'>Option 10</option>
</select>
</div>
<div class='col-md-2'>
<input type='button' class='btn btn-success btnadd' value='&plus;'>
</div>
</div>
</div>
</form>
</div>
</script>
</body>
</html>

You don't need to escape + and × so you can just enter these directly into your function.
The reason the value is blank is because the val property is being reset by this line:
newEntry.find('input').val('');
Here's a working JSFiddle.

The reason .val('×'); Doesnt put an "x" in there is because javascript does not parse these html codes itself. You will need to specify that it has to be parsed.
Here is a working model to use html codes in javascript/jquery.
$(function(){
var parser = new DOMParser;
$(document).on('click','.btnadd',function(e){
e.preventDefault();
var controlForm = $(this).parents('.formdupgroup:first'),
currentEntry = $(this).parents('.toduplicate:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val(parser.parseFromString('+', 'text/html').body.textContent);
newEntry.find('select').prop('selectedIndex',0);
controlForm.find('.btnadd:not(:last)')
.removeClass('btnadd').addClass('btnremove')
.removeClass('btn-success').addClass('btn-danger')
.val(parser.parseFromString('×', 'text/html').body.textContent);
}).on('click','.btnremove', function(e){
$(this).parents('.toduplicate:first').remove();
e.preventDefault();
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<form>
<div class='formdupgroup'>
<div class='form-row toduplicate'>
<div class='col-md-2'>
</div>
<div class='form-group col-md-8'>
<label for='selectexample' class='sr-only'>Select Example</label>
<select name='selectexample' class='form-control'>
<option value='' disabled selected>Please Select an Option</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
<option value='10'>Option 10</option>
</select>
</div>
<div class='col-md-2'>
<input type='button' class='btn btn-success btnadd' value='&plus;'>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
This also works for html codes that dont apear on your keyboard. for example ♠

Output is not my ideal thing

Output is not my ideal thing.I wanna make drill down buttons.
Now output is
index.html is
<html>　
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">
</head>
<body>
<select data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
</body>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
</html>
I wanna make only 2 drill down buttons in index.html .And if I select A in first button,a-1~4 is shown in second button.If I select B in first button,b-1~5 is shown in second button.If I select C in first button,c-1~2 is shown in second button・・・・.
So output now is different form my ideal one.I use Chosen in jQuery plugin. Why can't I do my ideal this? What is wrong? Why can't I filter to second button?

Hope this helps..
<html>　
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">-->
</head>
<body>
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
<script type="text/javascript">
// $(".chzn-select").chosen();
// $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function () {
$('#mainDD').on('change', function() {
console.log($(this).val());
console.log($('#mainDD :selected').text()) ;
var thisType = "type" + $(this).val();
for(i=1; i<5; i++) {
var thisId = "type" + i;
console.log(thisType + " " + thisId);
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
})
});
</script>
</body>
</html>

Conditional DropDown List Javascript and HTML

I'm trying to make a a webpage that has a conditional dropdown box using html and javascript. Say it's a certain day in the week like Monday I need a different dropdown box with different options when it's Thursday; however some days may have the same options. Originally I had two drop down box one when the person clicked what day it was and then the dropdown box would appear, but I was wondering if there was a way to do this automatically using a javascript function and also creating a function that only displays a certain dropdown list.
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>

If i understood your requirement correctly. This is what you are looking for using jquery
$("#QuestionOptions").change(function(){
$("#A,#B").hide();
if($(this).val() == "A"){
$("#A").show();
}else{
$("#B").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>

Check out my JSFidle. Most of code on javascript, remove some html element that doesn't needed.

With Dynamic options
var dynamic_options = {
'A': [{
value: "1",
text: "Option 1"
}, {
value: "2",
text: "Option 2"
}],
'B': [{
value: "3",
text: "Option 3"
}, {
value: "4",
text: "Option 4"
}]
};
$(function() {
var answers = $('#myAnswers').find('select');
$('#myQuestions').on('change', 'select', function(e) {
var options = dynamic_options[this.value] || [];
answers.find('option:gt(0)').remove();
$.each(options, function(i, option) {
answers.append($('<option>').prop(option));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myQuestions">
<select>
<option value=''>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div>
<p>Exapmle of question.</p>
</div>
<div>
<select>
<option value=''>Choose Your Answer</option>
</select>
</div>
</div>
BTW, to disable an option in select, use attribute disabled, whereas you have used disalbe.

The following code makes the option selected when the value is matched with the option value.
<html>
<head></head>
<body>
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>
<script>
$(document).ready(function(){
$('#qty option[value={{ $qty }}]').attr('selected','selected');
});
</script>
</body>
</html>

Disable option in other select

I have problem with option. I created search form. When I select class .tylkopolska I want disable all options from next select with id #kraje
and leave there option with class .wlacozneto enabled. How do this using jQuery?
My code is here;
<form method="get" action="<?php bloginfo('url'); ?>">
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input> <input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>
<!-- kategorie OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
<option value="szkoly" >WSZYSTKIE OFERTY</option>
<option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
<option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
<option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
<option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
<option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>
<!-- kategorie OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
<option value="firma">WSZYSTKIE OFERTY</option>
<option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
<option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>
<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
<option value="Polska">POLSKA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="BELGIA">BELGIA</option>
<option value="BIAŁORUŚ">BIAŁORUŚ</option>
<option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
<option value="CHORWACJA">CHORWACJA</option>
<option value="CZECHY">CZECHY</option>
<option value="ESTONIA">ESTONIA</option>
<option value="FRANCJA">FRANCJA</option>
<option value="GRECJA">GRECJA</option>
<option value="HISZPANIA">HISZPANIA</option>
<option value="LITWA">LITWA</option>
<option value="ŁOTWA">ŁOTWA</option>
<option value="NIEMCY">NIEMCY</option>
<option value="ROSJA">ROSJA</option>
<option value="RUMUNIA">RUMUNIA</option>
<option value="SŁOWACJA">SŁOWACJA</option>
<option value="SŁOWENIA">SŁOWENIA</option>
<option value="UKRAINA">UKRAINA</option>
<option value="WĘGRY">WĘGRY</option>
<option value="WŁOCHY">WŁOCHY</option>
</select>
<button type="submit">Szukaj ofert</button>
</fieldset>
</form>
<script>
var update_szkoly = function () {
if ($("#ofertadlaszkol").is(":checked")) {
$('#sofertyszkola').prop('disabled', false);
$("#ofertadlafirm").prop('checked', false);
$('#sofertyfirma').prop('disabled', true);
$('#sofertyszkola').show();
$('#sofertyfirma').hide();
}
else {
$('#sofertyszkola').prop('disabled', 'true');
}
};
$(update_szkoly);
$("#ofertadlaszkol").change(update_szkoly);
var update_firmysa = function () {
if ($("#ofertadlafirm").is(":checked")) {
$('#sofertyfirma').prop('disabled', false);
$("#ofertadlaszkol").prop('checked', false);
$('#sofertyszkola').prop('disabled', true);
$('#sofertyszkola').hide();
$('#sofertyfirma').show();
}
else {
$('#sofertyfirma').prop('disabled', 'disabled');
}
};
$(update_firmysa);
$("#ofertadlafirm").change(update_firmysa);
</script>

I want disable all options from next select with id #kraje and leave
there option with class .wlacozneto enabled.
to disable every option except with class wlacozneto
$( "#kraje option" ).not(".wlacozneto").prop('disabled', true);
use not selector to exclude certain results.

Bind a change event:
$('#sofertyszkola').change(function() {
$('#kraje').children().not('.wlacozneto')
.prop('disabled', $(':selected', this).is('.tylkopolska'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input>
<input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>
<!-- kategorie OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
<option value="szkoly">WSZYSTKIE OFERTY</option>
<option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
<option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
<option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
<option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
<option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>
<!-- kategorie OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
<option value="firma">WSZYSTKIE OFERTY</option>
<option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
<option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>
<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
<option value="Polska" >POLSKA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="BELGIA">BELGIA</option>
<option value="BIAŁORUŚ">BIAŁORUŚ</option>
<option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
<option value="CHORWACJA">CHORWACJA</option>
<option value="CZECHY">CZECHY</option>
<option value="ESTONIA" class='wlacozneto'>ESTONIA</option>
<option value="FRANCJA">FRANCJA</option>
<option value="GRECJA">GRECJA</option>
<option value="HISZPANIA">HISZPANIA</option>
<option value="LITWA">LITWA</option>
<option value="ŁOTWA">ŁOTWA</option>
<option value="NIEMCY">NIEMCY</option>
<option value="ROSJA">ROSJA</option>
<option value="RUMUNIA">RUMUNIA</option>
<option value="SŁOWACJA">SŁOWACJA</option>
<option value="SŁOWENIA">SŁOWENIA</option>
<option value="UKRAINA">UKRAINA</option>
<option value="WĘGRY">WĘGRY</option>
<option value="WŁOCHY">WŁOCHY</option>
</select>
<button type="submit">Szukaj ofert</button>
</fieldset>
Bind a change event on the selector element.
Now get the target element's children option elements and exclude specific one with .not(selector).
Use .prop() method to disable all other options if the selected option is .tylkopolska.

document.getElementById("kraje").disabled = true;

$( "#kraje" ).prop('disabled', true);
$( "#kraje.wlacozneto" ).prop('disabled', false);