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');

how to determine specific item to be selected in combobox with javascript

when I open the combobox via contextMenu, always the same item is selected.
How can I determine that one of the other items is selected?
For instance, there are 3 items "car1", "car2", "car3" and when I open the combobox "car1" appears in the list first. So how would I get e.g. "car2" appears in the list first?
Thanks very much!

if you mean a select element, you can change the order of items
<select id="list">
<option value="2">Car 2</option>
<option value="1">Car 1</option>
<option value="3">Car 3</option>
</select>
you could also set the default item with the selected attribute:
<select id="list">
<option value="1">Car 1</option>
<option value="2" selected>Car 2</option>
<option value="3">Car 3</option>
</select>

in JS you simply have to set the value of your select
const myForm = document.forms['my-form']
// set the select on the second cat
myForm.miaou.value = 'c2'
<form action="xxx" name="my-form">
<!-- other form elements -->
<select name="miaou">
<option value="c1">Cat 1</option>
<option value="c2">Cat 2</option>
<option value="c3">Cat 3</option>
</select>
</form>

Adding Hidden Attribute To Select Option Based On Option Value

I'm trying to create a working function that will hide specific select options based on certain values. The options will not have a class or id so I need to use the option value as an identifier.
Does anyone see a problem with this function?
function delivery_rate(valMap) {
if(valMap === 5000){
$(".addon-select option[value="1-day-1"]").setAttribute("hidden", true);
}
}

Instead of applying hidden on the options tag, create different versions of <select> and set all to be hidden. When a user selects a value that matches the criteria of that <select> tag, show that specific tag.
<select name="select" class="first-select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<select name="select" class="second-select">
<option value="value4">Value 1</option>
<option value="value5" selected>Value 2</option>
<option value="value6">Value 3</option>
</select>

Javascript SELECT BOX options dependent on other SELECT BOX option selected

i have a problem. I wanted to do on my web page this thing:
1. i have select box like this
<select name="firstbox" id="#firstbox">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
2. i have select box of which options are depending on first box, so if i choose in first box Option 1 i will have lets say this:
<select name="secondbox" id="#secondbox">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
and if i choose Option 2 i would have lets say
<select name="secondbox" id="#secondbox">
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</select>
And in adition based on those two selection box i need one link that changes url depending on those two. So it would be IF option from #firstbox = 1, and secondbox=2 #link is first.html
<a href="first.html" id="link" >Show </a>
I dont know if its doable in javascript, or is it better and more smooth to make it with PHP and small database... But i still dont know in that case how to change link of that button... Hope someone has an idea.

Alternatively, if you opt to use jQuery, of course you can use the onchange event. But first, you need to set a simple default values, wherein, it depends on what you select. Consider this example:
<select name="firstbox" id="firstbox" style="width: 100px;">
<option disabled selected>Select Value</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="select_boxes"></div>
<div id="link"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var default_values = {
"1": {"label": "first","values": [4,5]},
"2": {"label": "second","values": [8,9]},
"3": {"label": "third","values": [6,7]}
};
$(document).ready(function(){
$('#firstbox').on('change', function(){
var current = $(this).val();
$('#select_boxes').html('<select name="secondbox" id="secondbox" style="width: 100px;"></select>');
var options = '';
$.each(default_values[current].values, function(index, values){
options += '<option value="'+values+'">Option '+values+'</option>'; // fetch options
});
$('#secondbox').html(options); // add options
$('#link').html('show');
});
});
</script>
Sample Output

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.