We Keep Coding

Add a bootstrap class to JS class

I have a small question,
At the moment I have a 2 option boxes in my Test.php file. I want to show my second option box when I select leverancier in the first one. so far so good!
But now I want to apply some CSS to it...
for example the bootstrap form-control class...
this is my (simple) code:
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden");
}
else {
$("#Klanttable").addClass("hidden");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
So how can I make my first option box the same as my second option box?

With Jquery you can add multiple classes at once so your solution would just be:
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});

<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden form-control" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
now it's removing only the class, not the option box itself......

jQuery reset of select form doesn't work correctly

I have a form with select tags which initially by default are set to an empty option. For them I have also JavaScript, which disables an option if it was already selected previously by the user.
What I want to do is have a reset all button which if the user wants to can reset all the options to default. This part works but if the user has already selected some options and the JavaScript has disabled them they don't reset and are not anymore selectable. See on the JsFiddle.
JsFiddle: https://jsfiddle.net/qgob6k9m/4/
My question is if there is a way to also restart the previously selected options. Restarting the page is not an option because then the form is sent again.
Thank you!
var $selects = $('select');
$selects.on('change', function() {
$("option", $selects).prop("disabled", false);
$selects.each(function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
$options.each(function() {
if ($(this).text() == selectedText) $(this).prop("disabled",
true);
});
});
});
$selects.eq(0).trigger('change');
$("#button").on("click", function() {
$('#select1 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select2 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select3 option').prop('selected', function() {
return this.defaultSelected;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="option" id="select1" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select2" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select3" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input align="middle" id="button" type="button" value="Reset Form">
</form>

I think this will do the trick
$("#button").on("click", function(){
$('#select1 option').prop('selected', function(){
return this.defaultSelected;
}).prop('disabled', false);
$('#select2 option').prop('selected', function(){
return this.defaultSelected;
}).prop('disabled', false);
$('#select3 option').prop('selected', function(){
return this.defaultSelected;
}).prop('disabled', false);
});

You just need to remove the disabled attribut that you set on your option tag
Here is a fiddle of your project with the solution
var $selects = $('select');
$selects.on('change', function() {
$("option", $selects).prop("disabled", false);
$selects.each(function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
$options.each(function() {
if ($(this).text() == selectedText) $(this).prop("disabled",
true);
});
});
});
$selects.eq(0).trigger('change');
$("#button").on("click", function() {
$('#select1 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select1 option').prop('disabled',false) // remove the disabled attribut
$('#select2 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select2 option').prop('disabled',false) // remove the disabled attribut
$('#select3 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select3 option').prop('disabled',false) // remove the disabled attribut
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="option" id="select1" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select2" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select3" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input align="middle" id="button" type="button" value="Reset Form">
</form>

Javascript auto select from dropdown

I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';

how to disable <select> based on user selection in another <select>

i have two <select>, named category and category_sport
i want <select name='category_sport'> disable , if i click <option>sport</option> in <select name='category'> , i want enable <select name='category_sport'>
Anyone have an idea how ?
function disable()
{
document.getElementById("katOl").disabled=true;
}
function enable()
{
document.getElementById("katOl").disabled=false;
}
the script above is used in <option> ex:
<select name='category'>
<option value="1" onclick='enable()' >sport</option>
</select>
<select id='katOl' name='category_sport'>
<option value="1">Football</option>
</select>
but isn't work

try something like this
javascript
function check(val)
{
if(val == '1'){
document.getElementById("katOl").disabled=true;
}else{
document.getElementById("katOl").disabled=false;
}
}
html
<select name='category' onchange="check(this.value)">
<option value="" >SELECT</option>
<option value="1" >sport</option>
</select>

assuming that your looks like this :
<select name='category_sport' id="katOl"> ... </select>
HTML:
<select id="myselect" name='category' onchange="changeSelect()">
<option value="1">sport</option>
</select>
Javascript:
function changeSelect(){
var mySelect = document.getElementById("myselect");
var selectedValue = e.options[myselect.selectedIndex].value;
if(selectedValue=="1") //sport
{
document.getElementById("katOl").disabled=false;
}
}

try like this
$("#category").change(function(){
if($(this).val()=="yourvalue"){
disable();
}else{
enable();
}
});

You can try this:
$(document).ready(function(){
$('select[name=category]').change(function(){
if($(this).val() === '1'){
$('#katOl').prop('disabled', false);
} else {
$('#katOl').prop('disabled', true);
}
});
});
DEMO Link

use onChange event of select tag instead.
<select onChange="set_sport_cat(this)">
<option value="1">sport</option>
<option value="2">whatever</option>
</select>
function set_sport_cat(my){
alert("test");
if(my.options[0].selected){
alert("1");
}else{
alert("2");
}
}
http://jsfiddle.net/3A6X4/

HTML CODE:
<select name='category' id="category">
<option value="1">sport</option>
<option value="2">education</option>
</select>
<select id='katOl' name='category_sport'>
<option value="1">Football</option>
</select>
js Code:
(function(){
var cat = document.getElementById('category'),
katOl = document.getElementById('katOl');
cat.onchange = function() {
var v = cat.value;
if(v === '1') {
katOl.setAttribute('disabled', 'disabled');
} else {
katOl.removeAttribute('disabled');
}
}
})();

A much simpler and fun approach:
LIVE DEMO
<select name='category'>
<option>Sport</option>
<option>Food</option>
<option>Travel</option>
</select>
<select name='category_sport'>
<option>Football</option>
</select>
<select name='category_food' disabled>
<option>Pizza</option>
</select>
<select name='category_travel' disabled>
<option>Croatia</option>
</select>
jQuery:
$('select[name=category] option').click(function(){
var val = this.value.toLowerCase(); // "Sport" >> "sport"
$('select[name^=category_]').prop('disabled', 1); // Disable all
$('select[name=category_'+ val +']').prop('disabled', 0); // Enable
});

Here is my solution:
HTML:
<select name="category" onchange="alterSelection(event)">
<option value="">----</option>
<option value="1">Sport</option>
<option value="2">Food</option>
</select>
<select id="katOl" name="category_sport" disabled="disabled">
<option value="1">Football</option>
<option value="2">Cricket</option>
</select>
JS:
function alterSelection(e){
if( e.target.selectedIndex==1 ){
document.getElementById("katOl").disabled=false;
}else{
document.getElementById("katOl").disabled=true;
}
}

jquery disable item options if a certain value is selected

I'm stuck with a jquery problem .. I actually want to disable all the (from all other items except the parent one) if the selected value is "interestingValue"
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
ex : if we select "interestingValue" from the first menu we get
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2" disabled="disabled">bar foo2</option>
<option value="foo2" disabled="disabled">foo abc2</option>
<option value="bar2" disabled="disabled">foo abc2</option>
</select>
ex : if we select "interestingValue2" from the second menu we get
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue" disabled="disabled">bar foo</option>
<option value="foo1" disabled="disabled">foo abc1</option>
<option value="bar1" disabled="disabled">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
thanks :)

If your select tags are siblings you can try:
$('select').change(function(){
if (this.selectedIndex == 0) {
$(this).siblings('select').find('option').prop('disabled', true)
}
})
DEMO

I'm not sure I get it, but something like this:
$('[id^=menufoo]').on('change', function() {
if (this.value.indexOf('interestingValue') != -1 ) {
$('[id^=menufoo]').not(this).find('option').prop('disabled', true);
}else{
$('[id^=menufoo]').find('option').prop('disabled', false);
}
});​
FIDDLE

You can attach an onchange event to both select items and check whether the new select value is equivalent to interestingValue for the first menu and interestingValue2 from the second menu. You can use .prop() to disable this.
You can do something like this:
$("#menufoo").bind("change", function(event){
$("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));
});
$("#menufoo2").bind("change", function(event){
$("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});

here you go
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#menufoo").change(function (){
if($("#menufoo option:selected").val()=="interestingValue")
$('.menufooClass2 option').attr('disabled','disabled');
});
$("#menufoo2").change(function (){
if($("#menufoo2 option:selected").val()=="interestingValue2")
$('.menufooClass option').attr('disabled','disabled');
});
});
</script>
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>