We Keep Coding

Dynamic drop down list content/behavior using JQuery

I have a use case in our UI, where I need to perform some hacky JQuery operations to dynamically populate a drop down box. Here is the scenario:
I have the following two select boxes and their options:
<span class="select levelSelect expandable-list replacement select-styled-list tracked focus select-clone tracking open" tabindex="-1" style="width: 157px; position: absolute; top: 566.733px; left: 338px;">
<select id="select1" name="select1" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<span class="select-value">Select one...</span>
</span>
<span class="select levelSelect expandable-list replacement select-styled-list" tabindex="0">
<select id="select2" name="select2" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="optionA">option A</option>
<option value="optionB">option B</option>
</select>
<span class="select-value">Select one...</span>
</span>
Any change/selection for select1, invokes a change handler function, which needs to perform the following actions for select2:
If select1 == option1, Add an option for "N/A" (don't want this option to be seen), set "N/A" as the value
Otherwise, take out "N/A" if option 1 was previously selected, select ""
You should be able to repeatedly change select1 and get the same behavior
This is what I have tried:
if (select1 == "option1") {
// Add and select N/A
$("#select2").append('<option value="N/A">N/A</option>')
$("#select2").val('N/A');
}
else {
// Remove N/A option and select nothing
$("#select2").val('');
$("#select2" + " option[value='N/A']").remove();
}
Regardless of what is selected on select1, the selection/options for select2 do not change. Any help/pointers would be greatly appreciated.

This is what I was missing after each select box action:
.trigger('update-select-list').trigger('change');

Hide submit button based on select with multiple classes

I have a form with 4 dependent select dropdowns. What I want is, to hide/disable the submit button until option from the last select is chosen.
const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0];
const submitButton = document.querySelectorAll(".button, .woof_submit_search_form");
document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0].addEventListener('change', () => {
if (select.value === '0') {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
});
<select class="f_select f_select_product_cat f_select_product_cat_0" name="product_cat">
<option value="0">Select cat 1</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="f_select f_select_product_cat f_select_product_cat_1" name="product_cat">
<option value="0">Select cat 2</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="f_select f_select_product_cat f_select_product_cat_2" name="product_cat">
<option value="0">Select cat 3</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="f_select f_select_product_cat f_select_product_cat_3" name="product_cat">
<option value="0">Select cat 4</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button class="button f_submit_search_form">SEARCH</button>
I don't have much control over form rendering, so my best option is to get both the button and the last select by class name, but as you can see they have multiple classes.
Tried also to get the select with getElementsByName("product_cat")[0] but also doesn't make it to work.
Any help appreciated.

The first issue I see is that you're setting the submitButton to disabled when the value is 0. But you perform that verification only when the value of it changes as you listen to change.
You have only one button, why would you use document.querySelectorAll to retrieve it? Simply uses querySelector. More than that, it is an issue here as you are trying to set a NodeList to disabled = true and not an element! For you to understand, here are both output.
querySelectorAll
NodeList [button.button.f_submit_search_form, disabled: true]
0: button.button.f_submit_search_form
Excellent, we now see why it did not work! We are trying to set disabled = true to a NodeList which form is similar to an array!
So, in our case, we just need one element, so we can just fix that by using querySelector.
querySelector
<button class="button f_submit_search_form" disabled="">SEARCH</button>
That looks much more like what we need: the button alone.
And now, our .disabled makes sense and works!
const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0];
const submitButton = document.querySelector(".button, .woof_submit_search_form");
select.addEventListener("change", () => {
if (select.value === '0') {
submitButton.disabled = true
} else {
submitButton.disabled = false
}
})
That logic has a little flaw though: we are only setting submitButton to be displayed when the addEventListener occurs.
So we need in the HTML to add disabled by default, as per default, it will for sure not be set to anything else than default value.
<button class="button f_submit_search_form" disabled>SEARCH</button>
It now works, the button will be enabled ONLY if the last field value is anything else than 0.

Multiple drop down boxes?

I'm trying to get multiple drop down boxes to open when selecting different prompts from an original drop down menu.
So for example the original drop box would say "Continent" then drop down to a list of continents, when you select a continent a new box opens that asks you "Country" then you select a country and a new drop box opens to select a state.
I've been using this template
<script type="text/javascript">
function CheckDepartment(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';}
function CheckOption(val){
var element=document.getElementById('misc')
if(val=='misc')
element.style.display='block';
else
element.style.display='block';
}
</script>
</head>
<body>
<select name="color" onchange='CheckDepartment(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
<option value=""></option>
<option value="hi">hi</option>
<option value="misc" id="misc" >misc</option>
</select>
<select name="third" style='display:none;'>
<option value=""></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
but I can't get a third drop box to open when selecting an option from the second drop box.
edit: third box. I think i deleted my last try so this was kinda a recreation of it from what I remembered. I'm also incredibly new at all of this and don't know if anything I tried makes sense.

Here's a simplified demo.
(It assumes only a "yes" value should trigger the display of the next dependent dropdown.)
const
select1 = document.getElementById("select1"),
select2 = document.getElementById("select2");
document.addEventListener("change", handleDropdownDisplay);
function handleDropdownDisplay(event) {
let changedElement = event.target;
if ((changedElement != select1) && (changedElement != select2)) {
return;
}
if (changedElement.value == "yes") {
changedElement.parentElement.nextElementSibling.classList.remove("hidden");
} else {
changedElement.parentElement.nextElementSibling.classList.add("hidden");
}
}
div {
margin-bottom: 0.5em;
}
.hidden {
display: none;
}
<div>
<label for="select1">Show level 2?</label>
<select id="select1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select2">Show level 3?</label>
<select id="select2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select3">Would your rather</label>
<select id="select3">
<option value="brains">Eat monkey brains</option>
<option value="vba">Write code in VBA</option>
</select>
</div>
(Btw, level 3 doesn't automatically become hidden whenever level 2 becomes hidden. This is probably functionality you'll want to add.)

Adding a clear option to the drop down list using javascript

I have a drop down similar to this:
<select>
<option value=" " id="invisible" style="display:none;"></option>
<option value="0">one</option>
<option value="1">two</option>
<option value="2">three</option>
<option value="">clear</option>
</select>
When I press 'clear' option, the drop down list should show nothing (even 'clear') but not delete any options inside i.e. nothing should show on the dropdown list until it is clicked.
Please advise.

just have an id for select and set value for option clear as 'clear'...
<option value='clear'>clear</option>
<select id="select">
then try this...
if($('#select').val() == 'clear'){
$('#select).val('');
}
For javascript...
var value = document.getElementById('select');
if(value == 'clear'){
document.getElementById('select').value = '';
}
might work...

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.

Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.

As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.

My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.