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

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;
}
}

Related

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......

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 dropdown options based on the previously selected dropdown values in multi select dropdown?

i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?

I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

you can use normal js to achieve this.Use this following code on day_list_‌​1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_‌​1").selectedIndex].disabled = true;

Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..

Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.

It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

Change placeholder of input when I select Option

I have been trying out some jQuery coding but doesn't seem to work. In the #vat input, I need the placeholder to change.
<select id="VatExpense">
<option value="" disabled selected></option>
<option value="0"></option>
<option value="1"></option>
<option value="0"></option>
<option value="0"></option>
<option value="1"></option>
</select>
<input type="text" id="vat" placeholder="Rate">

You should be using data- attributes, not value to determine the rates.
Demo fiddle
HTML:
<select id="VatExpense">
<option data-rate="20" value="" disabled selected>Expense Type</option>
<option data-rate="20" value="0">Telephone</option>
<option data-rate="0" value="1">Public Transport & Taxis</option>
<option data-rate="20" value="2">Computer Consumables</option>
<option data-rate="20" value="3">Subsistence</option>
<option data-rate="0" value="4">Overseas Travel</option>
</select>
Then read them in the jQuery and change the placeholder accordingly.
Script:
<script type="text/javascript">
$(function(){
$("#VatExpense").change(function(){
$("#vat").attr("placeholder", $(this).find(":selected").data("rate") + "%");
});
});
</script>

You can try this:
Jquery :
$("#VatExpense").on("change", function() {
var vatExpense = $("#VatExpense option:selected").val();
var vatPlaceholder = "Rate";
if (vatExpense == 0) {
vatPlaceholder = "Standard rate 20%";
} else if (vatExpense == 1) {
vatPlaceholder = "Zero Rate 0%";
}
$("#vat").attr("placeholder", vatPlaceholder);
});
JsFiddle: http://jsfiddle.net/ghorg12110/kzmL0e1j/

You can do it like this :
(function() {
var placeholders = {
'value_':'Rate',
'value_0':'Standard rate 20%',
'value_1':'Zero Rate 0%'
};
$("#VatExpense").on('change', function(e) {
$("#vat").prop('placeholder', placeholders['value_' + $(this).val() ]);
});
})();

Try below like this Demo Here use attr()
$('#VatExpense').change(function(){
var selectedval = $(this).val();
if(selectedval == 0){
$('#vat').attr('placeholder','Standard rate 20%');
}else if(selectedval == 1){
$('#vat').attr('placeholder','Zero Rate 0%');
}
});

HTML multi select how to deselect all if select first item using jquery

I have a multi select control look like below,
When user select "Any", I want to deselect all other selected values and select only "Any", means, if user select "Any", do not allow to select other values else allow to select other values.
How its possible through jQuery
Thanks...

jQuery("#select").change(function() {
if (jQuery("#select option:first").is(':selected')) {
jQuery("#select").val("any");
}
});
To the form below:
<select multiple id="select">
<option value="any">Any</option>
<option value="...">...</option>
...
</select>

I think you want something like this:
$("select").on("change", function () {
var selOption = $("option:selected", this).val();
if (selOption == "any") {
$(this).attr("selected", false);
$(this).val("any");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" multiple="multiple">
<option value="any">Any</option>
<option value="12">twelve</option>
<option value="13">thirette</option>
<option value="14">fourteen</option>
<option value="15">fifteen</option>
<option value="16">sixteen</option>
<option value="17">seventeen</option>
<option value="18">eighteen</option>
<option value="19">nineteen</option>
<option value="20">twenty</option>
</select>

In most cases this should work
$('.my-select').val('any')
Where is ’any' is a value of Any option.
(function() {
var mSelect;
mSelect = $('select');
mSelect.on('click', function(event) {
var values, needReset;
values = mSelect.val();
needReset = event.target.value === 'any' ||
(values.length > 1 && values.indexOf('any') !== -1);
if (needReset) {
mSelect.val('any');
}
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="any">Any</option>
<option value="divorced">Maried</option>
<option value="unmarried">Unmarried</option>
</select>

Categories