Develop Reference

Hide an option in a multiple select, when a specific option has been selected from another select

I have seen questions similar to this but mine is different.
so I have these first 2 dropdown menu (data are selected from my database) and another dropdown which is attributed with multiple,
now my code works on the first 2 dropdowns but when it comes to the multiple dropdown it's not working.
here are my dropdown menu;
<select class="custom-select" name="option_one">
<option>test1</option>
<option>test2</option>
<select class="custom-select" name="option_two">
<option>test1</option>
<option>test2</option>
<select id="multiple" class="custom-select" name="option_three[]" multiple="multiple">
<option>test1</option>
<option>test2</option>
Here is my javascript
$(document).ready(function() {
function intializeSelect() {
$('.custom-select').each(function(box) {
var value = $('.custom-select')[box].value;
if (value) {
$('.custom-select').not(this).find('option[value="' + value + '"]').hide();
}
});
};
intializeSelect();
$('.custom-select').on('change', function(event) {
$('.custom-select').find('option').show();
});
});

With a single on change attached to all select , you could check value and hide depending on innerHtml or value ( in your case no value , so checking by text) ,
What I've done is first showing all option , then check value if not undefined ,
if thre were a value hide other options input , that has same text value ,
See below working snippet :
$(document).ready(function() {
$('.custom-select').on('change', function(event) {
let value = $(this).val();
// show all options of all select
$('.custom-select').find("option").show();
// reset values after change of other select
$('.custom-select').not(this).val("");
if (value.length > 0) {
$('.custom-select')
.not(this)
.find("option")
.filter(function() {
return $(this).html() == value;
}).hide();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom-select" name="option_one">
<option></option>
<option>test1</option>
<option>test2</option>
</select>
<select class="custom-select" name="option_two">
<option></option>
<option>test1</option>
<option>test2</option>
</select>
<select id="multiple" class="custom-select" name="option_three[]" multiple="multiple">
<option></option>
<option>test1</option>
<option>test2</option>
</select>

Unable to fill the other fields on the basis of option selected

I want to fill the other fields on the form from database on the basis of option selected, but unable to do using php and javascript.I have attached json data I received in question. I want to fill other form fields when i select option from the form field houseowner_select and i want to show div app_houseowner when i select option from the select box having id applicant_is.
$("#applicant_id").on("change", function() {
var selected = $(this).val();
makeAjaxRequest1(selected);
});
function makeAjaxRequest1(opts) {
$.ajax({
type: "POST",
data: {
opts: opts
},
url: "get_houseownerinfo_applicant.php",
success: function(res) {
console.log(res);
debugger;
$("#applicant_wardno").val(res.ho_wardno);
$("#applicant_citizenship_no").val(res.ho_citizenship_number);
$("#applicant_phone").val(res.ho_phone);
}
});
}
<select name="applicant_is" class="form-control" ng-model="applicant.applicant_is" ng-change="callback_change_applicant_is($event)">
<option value="">--select--</option>
<option value="app_houseowner">घरधनी</option>
<option value="landowner">जग्गाधनी</option>
<option value="waris">वारिश</option>
</select>
<div class="app_houseowner">
<select class="form-control" name="houseowner_select" id="applicant_id">
<option value="">--Select--</option>
<option value="<?php if (isset($row11['id'])){ echo $row11['id'];}?>">
<?php if (isset($row11['ho_name_en'])){ echo $row11['ho_name_en'];}?>
</option>
</select>
</div>
<input type="text" name="applicant_phone" class="form-control" id="applicant_phone">
<select name="applicant_wardno" class="form-control" id="applicant_wardno">
<option value="">--Select--</option>
<?php for ($x = 1; $x <= 19; $x++) {
echo "<option value=".$x.">".$x."</option>";
}?>
</select>
<input type="text" name="applicant_citizenship_no" class="form-control" id="applicant_citizenship_no">

First of all remove or comment $("#applicant_salutation").val(res.ho_salutation) and $("#applicant_district").val(res.ho_citizenship_district) line in from your javascript code bcoz both id is not available in your html.
Also add dataType: 'json' in you ajax request
As i have checked applicant_wardno is select box and you have to set selected for displaying value in the select box instead of setting val.
check this link for setting selected value

You can debbug with an alert: alert(res.ho_wardno); and see if the value is being returned from the ajax query;
$("#applicant_wardno").val(res.ho_wardno);
alert(res.ho_wardno);
$("#applicant_citizenship_no").val(res.ho_citizenship_number);
$("#applicant_phone").val(res.ho_phone);

Disabled option from select box if already selected

I have a table with id = fields-list and inside this table 4 select box with the same class db-list. Now I want if the option in first select is selected disable this option in the rest of selectbox
<table id="fields-list" class="table table-hover">
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
</table>
I tried like this :
$('.db-list').on('change', function () {
if( $('#fields-list').find('select option[value='+$(this).val()+']:selected').length>1){
$(this).val($(this).find("option:first").val()).prop('disabled', true);
}
});
But not work. Can you help me please ? Thx in advance and sorry for my english.
Situations how need to work :
1. First Select choose option 1 (all select box from the page should disable option 1);
2. Second Select choose option 3 (all select box from the page should disable option 3 + option 1 from previous selectd)
3. First Select choose option 4 (now all select box should disable option 4 + option 3 and enable option 1)

table should be changed to something else, div for example, because table should contain thead, tbody or tr
this line:
$(this).val($(this).find("option:first").val()).prop('disabled', true);
will disable select, but not option, so try this:
$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);
working example
$('.db-list').on('focus', function () {
var ddl = $(this);
ddl.data('previous', ddl.val());
}).on('change', function () {
var ddl = $(this);
var previous = ddl.data('previous');
ddl.data('previous', ddl.val());
if (previous) {
$('#fields-list').find('select option[value='+previous+']').removeAttr('disabled');
}
$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fields-list" class="table table-hover">
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
</div>

You can use .filter() to get options with a similar value
$('select').on('change', function() {
$('option').prop('disabled', false);
$('select').each(function() {
var val = this.value;
$('select').not(this).find('option').filter(function() {
return this.value === val;
}).prop('disabled', true);
});
}).change();

$('.db-list:first').on('change', function () {
// enable all first
$('.db-list:last option').prop('disabled', false);
// disable the selected value
$('.db-list:last option[value="'+ $(this).val() +'"]').prop('disabled', true);
});
And by the way, option's shouldn't have the same value in one select option.

pass element ID as a parameter to jquery

I have a select box on a web form that, depending on what is selected, will show a hidden div.
<script>
$(document).ready(function () {
$("#Select1").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("Value")=="2"){
$("#hiddentable11").show();
}
else if($(this).attr("Value")=="3"){
$("#hiddentable11").show();
}
else{
$("#hiddentable11").hide();
}
});
}).change();
});
</script>
The form will have 35 to 40 of these Select box/hidden div combinations. The option values in the select boxes will all be the same every time (0,1,2,3,4). If the user chooses option 2 or 3 for Select1, hiddentable11 appears. If they choose option 2 or 3 for Select2, hiddentable 12 appears I don't want to copy/paste this code 40 times and in the code change Select1/hiddentable11 to Select2/hiddentable12, Select3/hiddentable13 etc. How do I change this code so that I can reuse it for all of the select/div combinations?

Give all the select boxes a class, e.g. class="select". Then you can usethis.id` to get the ID of the target element, and concatenate it to the DIV id.
$(".select").change(function() {
var num = this.id.slice(6); // get N from id="SelectN"
$("#hiddentable1" + num).toggle($(this).val() == "2" || $(this).val() == "3"));
});

Then just make a .Select class, and use this, pass in the corresponding hidden table as a user defined unique data attribute (I'll use data-hidden as an example). Then you can create the proper selector for each item by doing "#"+$(this).attr("data-hidden"):
$(".Select").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("Value")=="2") {
$("#"+$(this).attr("data-hidden")).show();
}
else if($(this).attr("Value")=="3") {
$("#"+$(this).attr("data-hidden")).show();
}
else {
$("#"+$(this).attr("data-hidden")).hide();
}
});
}).change();

Try this. With this you don't need to depend on ID's. You may multiple select boxes to your code and table combo and never have to change your js code.
<select id="select1">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable11">
Hidden Contents of Select1
</div>
<select id="select2">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable12">
Hidden Contents of Select2
</div>
<select id="select3">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<div id="hiddentable13">
Hidden Contents of Select3
</div>
$("select").change(function () {
var index = $('select').index($(this));
index++;
var $this = $(this).find("option:selected").val();
$("#hiddentable1" + index).css("display", $this === "2" || $this === "3" ? "inline-block" : "none");
});
http://jsfiddle.net/njzatgku/1/

Validating multiple select box

Select box 1
<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
Select box 2
<select name="slt_drop2" id = "slt_drop2">
<option value ="0">----------</option>
...........
</select>
Select box 3
<select name="slt_drop3" id = "slt_drop3">
<option value ="0">----------</option>
...........
</select>
Select box 4
<select name="slt_drop4" id = "slt_drop4">
<option value ="0">----------</option>
...........
</select>
In a HTML form I've used 4 select buttons, if the user selects the value as "0" i.e (Default value) in any of the select button it should show message near to the select button , "please select the correct value" for that particular for example if the value of slt_drop3 is "0" it should alert near slt_drop3 select option . The message should be displayed for individual button and not common alert .

maybe this is what you want ? Demo
$("select").change(function()
{
if($(this).val() == "0")
$(this).after(' <small> please select the correct value</Small>');
else
if($(this).next().prop("tagName").toLowerCase() == "small")
$(this).next().remove();
});
$("select").trigger("change");

Do you use jQuery in your project? I think you can listen when you change the value of select and validate it:
$(function() {
$('select').on('change', validate);
function validate(e) {
var select = $(e.currentTarget);
var id = select.attr('id');
var val = select.val();
if (val === '0') {
showMessage(id);
} else {
hideMessage(id);
}
}
function showMessage(id) {
$('.message[data-select-id="' + id + '"]').show();
}
function hideMessage(id) {
$('.message[data-select-id="' + id + '"]').hide();
}
});
Add blocks for messages near each select tag and show it if necessary
<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
<div class='message' data-select-id='slt_drop1'>please select the correct value</div>

Add a common class to each SELECT element.
Use jQuery to select that elements which match that class.
Bind a change event to the selector and apply the logic to check for "0" value
$(document).ready(function() {
$('select.is-valid').change(function() {
var $el = $(this);
if($el.val() == 0) {
$el.after('<div>Select a different value</div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test[]" class="is-valid">
<option value="0">---</option>
<option value="1">1</option>
</select>
<select name="test[]" class="is-valid">
<option value="0">---</option>
<option value="1">1</option>
</select>
<select name="test[]" class="is-valid">
<option value="0">---</option>
<option value="1">1</option>
</select>
That's a basic example of what you're trying to achieve. Actual element/validation placement is up to you. I would recommend making a "Submit" button to check the validation but I assume you know how to do that.