We Keep Coding

Hide Dropdown List Value, when another dropdown value selected Javascript

so, i want to hide "Overtime AC" Value when i choose Balikpapan Office.
This is my code, still not working
var ddlLoc = $("[id$='_ddl_OfficeLocationosf']");
var ddlReqFor = $("[id$='_ddl_RequestForosf']");
ddlLoc.change(function() {
if(ddlLoc.find("option[value='Balikpapan Office']") == true) {
ddlReqFor.find("option[value='Overtime AC']").parent().parent().hide();
} else {
ddlReqFor.find("option[value='Overtime AC']").parent().parent().show();
}
});

Why use parent().parent() of the option you want to hide?
Do they have a common parent?
$("[id$='_ddl_OfficeLocationosf']").on("change",function() {
$(this)
.closest(".commonContainerClass")
.find("[id$='_ddl_RequestForosf'] option[value='Overtime AC']")
.toggle(this.value === 'Balikpapan Office')
})

Native JavaScript Solution
This is a native JavaScript solution to compliment #mplungjan jQuery solution. The solutions work differently, but both solve the problem of creating a cascading select.
Add an event handler to capture the office name and copy it to data-office attribute on the second select:
_ddl_OfficeLocationosf.addEventListener('change', function() {
_ddl_RequestForosf.dataset.office = this.value;
});
Then we add a css rule that selectively hides options that match the selected offices. This is done by adding a data-exclude attribute with a list of office names where the options should be hidden. Note that we're using a *= match so that we don't need to use full names. In this case we are only hiding one option, but it would be easy to create custom lists for each office.
#_ddl_RequestForosf[data-office*=Balik] option[data-exclude*=Balik] {
display: none;
}
And the markup
<option data-exclude="Balikpapan">Overtime AC</option>
Snippet
The snippet includes some additional code to handle loading and switching offices. See comments for details.
_ddl_OfficeLocationosf.addEventListener('change', function() {
_ddl_RequestForosf.dataset.office = this.value;
// optional -clear previous selection when not an option for current office
let option = _ddl_RequestForosf.querySelector('option:checked');
if (option && getComputedStyle(option).display === 'none') {
_ddl_RequestForosf.value = "";
}
});
// optional - update the control on page load
document.addEventListener('DOMContentLoaded', function() {
_ddl_OfficeLocationosf.dispatchEvent(new Event('change'));
});
body {
font-family: sans-serif;
}
#_ddl_RequestForosf[data-office*=Balik] option[data-exclude*=Balik] {
display: none;
}
<label>Office
<select id="_ddl_OfficeLocationosf">
<option>Balikpapan Office</option>
<option>Brunei Office</option>
<option>Makassar Office</option>
</select>
</label>
<label>Request:
<select id="_ddl_RequestForosf">
<option>Stationary</option>
<option>Business Card</option>
<option>Stamp</option>
<option data-exclude="Balikpapan">Overtime AC</option>
<option>Condolence Bouquet</option>
<option>Fogging for Employee House</option>
<option>Foldable Box</option>
<option>Others</option>
</select>
</label>

How can I hide/show options on the fly with bootstrap-multiselect?

I am using bootstrap-multiselect to give the user great controller over two key menus. My first menu is called groups and other called queues. Each option in the queues has an HTML5 data attribute (i.e. data-group="X", where X is a group-value)
When the user selects a option/group from the groups menu, I want to find and hide every queue/option in the queues menu where data-group is not equal to a selected group in the groups menu.
After identifying the queues/items that needs to be hidden/showing, I tried to use .show() and .hide() extensions. Then I tried to use .addClass('hidden') and .removeClass('hidden') methods, but nothing is working for me.
How can I show/hide items on the fly with bootstrap-multiselect?
Here is my code
$(function () {
var queueGroupIds = $('#QueueGroupIds');
var queueIds = $('#QueueIds');
queueGroupIds.multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
var groups = queueGroupIds.find('option:selected');
if (groups.length == 0) {
//When none of the groups are selected, show all queues!
queueIds.find('option').each(function (i, q) {
$(q).show();
});
}
var queueToDeselect = [];
//loop over every select option "if any are selected"
groups.each(function (index, grp) {
var group = $(grp);
// loop over every queue option
queueIds.find('option').each(function (i, q) {
var queue = $(q);
//id the data-group value == selected group show the item
if (queue.data('group') == group.val()) {
queue.show();
//this prints the value which should be showing
console.log('showing', queue.val());
} else {
queueToDeselect.push(queue.val());
queue.hide();
//this prints the value which should be hidden
console.log('hidding', queue.val());
}
});
});
//Delected all hidden queues
queueIds.multiselect('deselect', queueToDeselect);
queueIds.multiselect('refresh');
}
});
queueIds.multiselect({
nonSelectedText: 'Select queue(s)'
});
});

Edited for default none selected:
Example shown in the following fiddler (I've trimmed it down to a base example for clarity): https://jsfiddle.net/m6uuL53w/3/
No need for any manual messy DOM ADD/REMOVE manipulation. Multiselect will carry over the disabled class you put on your raw list so you just need target it with css after you set the disabled values and refresh your list. Let multiselect worry about dom manipulation.
Example HTML:
<select id="one" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="two" multiple="multiple">
<option data-group="1" value="OneA" disabled >One A</option>
<option data-group="1" value="OneB" disabled>One B</option>
<option data-group="2" value="TwoA" disabled>Two A</option>
<option data-group="2" value="TwoB" disabled>Two B</option>
<option data-group="3" value="ThreeA" disabled >Three A</option>
</select>
Jquery:
$(document).ready(function() {
$('#one').multiselect({
onChange: function(element, checked) {
var opts = $('*[data-group="'+ element.val() +'"]');
if (checked === true) {
opts.prop('disabled', false).prop('selected', false);
}
else if (checked === false) {
opts.prop('disabled', true).prop('selected', false);
}
$("#two").multiselect('refresh');
}
});
$('#two').multiselect();
});
Just a pinch of CSS:
.multiselect-container > li.disabled { display:none;}

https://jsfiddle.net/ta1wvs3j/1/
//Because we alter the DOM, we need to save an instance of the original list
//There are many ways to do this, I chose an easy one
var globalClone = $('#queues option');
//Init the queues
$('#queues').multiselect({
nonSelectedText: 'Select queue(s)',
onChange: function (option, checked, select) {
}
});
//Init the groups
$('#groups').multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
//Store the list of selections in an array
var selections = $('#groups').val();
//Reset the queue to it's starting list so we can loop
$('#queues').html(globalClone);
//Look at each option
$('#queues option').each(function(){
//"includes" may not be widly suppoerted but there are other ways to see if a value is in an array
//Check to see if the data-group value is in the selections array, if it's not
if( selections.includes(String($(this).data('group'))) == false ){
//Remove the option from the DOM
$(this).remove();
}
});
//Rebuild, per the multiselect docs basically reinit the select. Nice we don't have to destroy and recreate.
$('#queues').multiselect('rebuild');
}
});
This isn't how I'd leave production code exactly but it shows you how it can work.
Basically, loop, check, alter DOM, and rebuild multiselect. I think this is what you want.

How to "dropdown" a select when click on somewhere else?

This is the thing I have:
A normal select with a few options...
And the thing is, I do need to click in some other div and when I click on that one, I want the select list to show up as they were clicked normally and then allow the user to choose from the select options
I have some code already
<div onclick="set_select()"></div>
<select class='form-control' id='opts'>
<option selected disabled></option>
<option>Contacto</option>
<option>Entrevista</option>
<option>Prensa</option>
<option>Conferencias</option>
</select>
<script type="text/javascript">
function set_select(){
var select = document.getElementById('opts');
return select.active = true;
}
</script>

Not possible with plain html/javascript.

You need some plugin to replace your standard select field with divs and then use your function to trigger that divs. One is selectmenu: https://jqueryui.com/selectmenu/#product-selection
There is a lot more of them available: https://www.google.pl/search?q=js+select+replacement&gws_rd=cr&ei=wN5ZV8SjMIGLsgGP_IboDQ

This is "sort" of possible but not trivial and you will need to possibly do some management of the effect as I do here in the "change" event for the select. Not perfect but perhaps this can give you a start.
Note you MIGHT just want to use the "focus" on the select or, set the visible size as I do here, set the select size on the change to 0 with event.target.size = 0; and so forth.
Revised the markup a bit to allow the click handler:
<div id="clicker">clicker</div>
<select class='form-control' id='opts'>
<option selected disabled></option>
<option>Contacto</option>
<option>Entrevista</option>
<option>Prensa</option>
<option>Conferencias</option>
</select>
Here is the script, as I said, not perfect but you can decide how you handle the change/click events.
window.onload = function() {
var id = "clicker";
var div = document.getElementById(id);
var select = document.getElementById("opts");
div.onclick = function(event) {
console.log('clicker div');
select.size = select.options.length;
select.focus();
};
select.onclick = function(event) {
console.log('opt clicked');
};
select.onchange = function(event) {
console.log('opt change');
var index = event.target.selectedIndex;
console.log(index);
event.target.size = index + 2;
};
}
Here is a fiddle you can use to get you started: https://jsfiddle.net/MarkSchultheiss/mL0b7ubr/
Note that if you wish to use the "default" size for the select you can detect that like so:
if (event.target.type == "select-one") {
event.target.size = 1;
} else {
event.target.size = 4;
}
Here is a fiddle with that change and a bit cleaner on the event attachment: https://jsfiddle.net/MarkSchultheiss/mL0b7ubr/1/

Alert when user select the same <option> in dynamically created <selects>

I have a PHP page that creates multiple selects depending on how many the page before it gives it and creates the same number of options that there are selected (it's to choose the priority).
<select name="select1" id="idSelect" onchange="javascript:SelectOnChange();">
<option value="Select one">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
What I want to do is, whenever the user chooses an option that was already selected in another selection, to show an alert in order to let them know that their choice has already been taken and deny the change.
I want to compare the currently selected option to every previously selected option every time the user selects something from every select.

Basically your looking for a change event to loop through each select and notify duplicates.
$("select").change(function() {
var currentSelection = this.value;
$("select").each(function() {
if (this.value == currentSelection) {
alert("you've already chosen this!");
}
});
});
Something like this should work

Listen for change events
Get the element's seletedIndex
Grab all of the selects with getElementsByTagName()
Loop through and get the selected index
Compare to see if used

This could maybe work :
var $selects = $('select');
// WHen a select is changed.
$selects.onchange(function() {
// Storing it's selected value, assuming there is only one per select.
var value = $(this).selected().first().attr('value');
var $changedSelect = $(this);
// For each select...
$selects.each(function() {
var $otherSelect = $(this);
// ...that is not the one that just changed.
if( ! $otherSelect.is($changedSelect)) {
// If that other select's selected value is the same as the changed one's
if($otherSelect.selected().first().attr('value') === value) {
alert('...');
}
}
});
}
I didn't try it though, you might have to change a few details in it if it doesn't work.

Hiding <option>s in IE

I wrote this nifty function to filter select boxes when their value is changed...
$.fn.cascade = function() {
var opts = this.children('option');
var rel = this.attr('rel');
$('[name='+rel+']').change(function() {
var val = $(this).val();
var disp = opts.filter('[rel='+val+']');
opts.filter(':visible').hide();
disp.show();
if(!disp.filter(':selected').length) {
disp.filter(':first').attr('selected','selected');
}
}).trigger('change');
return this;
}
It looks at the rel property, and if the element indicated by rel changes, then it filters the list to only show the options that have that value... for example, it works on HTML that looks like this:
<select id="id-pickup_address-country" name="pickup_address-country">
<option selected="selected" value="CA">Canada
</option>
<option value="US">United States
</option>
</select>
<select id="id-pickup_address-province" rel="pickup_address-country" name="pickup_address-province">
<option rel="CA" value="AB">Alberta
</option>
<option selected="selected" rel="CA" value="BC">British Columbia
</option>
<option rel="CA" value="MB">Manitoba
</option>...
</select>
However, I just discovered it doesn't work properly in IE (of course!) which doesn't seem to allow you to hide options. How can I work around this?
Here's what I've got now:
(function($) {
$.fn.cascade = function() {
var filteredSelect = $(this);
var filteredOpts = this.children('option');
var triggerSelect = $('[name='+this.attr('rel')+']');
triggerSelect.change(function() {
var triggerValue = $(this).val();
filteredOpts.detach()
.filter('[rel='+triggerValue+']').appendTo(filteredSelect)
.filter(':first').attr('selected','selected');
}).trigger('change');
return this;
}
})(jQuery);
Which does work in IE, but still has two problems. The .filter(':first').attr('selected','selected'); bit doesn't seem to do anything in IE (it should select the first visible element). Since I've been using appendTo it currently defaults to the last. And the other problem is that since I detach all the elements immediately, you can't have default values in your HTML.

Options cannot be marked hidden. You must use the SelectElement.add(option) and SelectElement.remove(index)...
Here is a link to remove and add select Options in the same order.
How can I restore the order of an (incomplete) select list to its original order?
Here is a link where I made a post for just doing the most simple thing
How to hide optgroup/option elements?
Note in my post the try catch. This is necessary when adding elements expecially when making the site usable in firefox and IE.