We Keep Coding

Selecting Item from First Select Box to Populate Second Select Box

I have a form with two select fields. The first select field will list items, the second select field will start empty but be populated by selecting an item from the first and pressing the add button. You would also be able to do the same. You can select an item from the second select field and hit the remove to add it back to the first select field. In the end, I want all the values of the second select field to be in a hidden form box separated by commas.
I've come across examples of this with javascript in the past, but now that I need them I can't seem to find them. Does anyone know of any sources that could show me how to accomplish something like this? At first, I was thinking of doing it using ajax but I would rather do it without loading another page. Any help in pointing me in the right direction would be greatly appreciated! Thanks in advance!
<form name="SelectItem">
<select name="SelectItem">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>
<button>Add =></button>
<button><= Remove</button>
<select name="SelectedItems">
<option value=""></option>
</select>
</form>

You can use jquery append() to do it:
$(document).ready(function(){
$('.add').click(function(){
$('#select1').find('option:selected').appendTo('#select2');
});
$('.remove').click(function(){
$('#select2').find('option:selected').appendTo('#select1');
});
});
Working pen

You can use the add() and remove() methods on the select element:
const select1 = document.getElementById('select1')
const select2 = document.getElementById('select2')
const addItem = () => {
event.preventDefault();
if(select1.length === 0) return;
let itemIndex = select1.selectedIndex;
let item = select1.options[itemIndex];
select1.remove(itemIndex)
select2.add(item);
}
const removeItem = () => {
event.preventDefault();
if(select2.length === 0) return;
let itemIndex = select2.selectedIndex;
let item = select2.options[itemIndex];
select2.remove(itemIndex)
select1.add(item);
}
document.getElementById('addButton').addEventListener('click', addItem);
document.getElementById('removeButton').addEventListener('click', removeItem);
<form name="SelectItem">
<select name="SelectItem" id="select1">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>
<button id="addButton">Add =></button>
<button id="removeButton"><= Remove</button>
<select name="SelectedItems" id="select2">
</select>
</form>

Below is one relatively simple approach you can take that takes advantage of event delegation technique:
const inSelectEl = document.querySelector('#in-item-list');
const outSelectEl = document.querySelector('#out-item-list');
const optionQuantity = inSelectEl.options.length;
const onClick = e => {
if (e.target.tagName !== 'BUTTON') {
return;
}
let a, b;
if (e.target.id === 'add') {
a = inSelectEl;
b = outSelectEl;
} else {
a = outSelectEl;
b = inSelectEl;
}
const selectedOption = a.options[a.selectedIndex];
b.options[b.options.length] = selectedOption;
}
document.querySelector('#container').addEventListener('click', onClick);
<!-- Added container to enable event delegation -->
<div id="container">
<select name="SelectItem" id="in-item-list">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>
<button id="add">Add =></button>
<button id="remove"><= Remove</button>
<select name="SelectedItems" id="out-item-list" />
</div>

Automatically generating dropdown list

I try to create an infinite dropdown list. With this I mean if you click something on the first dropdown list, the second dropdown list will pop up. If you choose something on the second the third one will pop up...
The only difference between the dropdown lists is that only the first one will be required to fill in.
My dropdown list:
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onclick="myFunction()" required>
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
The new coming dropdown lists:
<div id="myDIV" style="display:none">
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onselect="myFunction()">
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
</div>
The Java Script:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I also searched for another function than onclick, because that's not for the dropdown lists I think, at least it's buggy. I tried some others but than it doesn't do anything
How can I make an automatically infinite generating dropdownlist?

If i understood you correctly the following is what you want to do.
var addDropDown = function (e) {
e.currentTarget.removeEventListener(e.type, addDropDown);
var clone = e.currentTarget.cloneNode(true);
clone.setAttribute('id', "dropdown-" + document.getElementsByTagName("select").length)
e.currentTarget.parentNode.insertBefore(clone, e.currentTarget.nextSibling);
clone.addEventListener("change", addDropDown);
}
document.getElementById("dropdown-0").addEventListener("change", addDropDown);
<select id="dropdown-0" name="dropdown">
<option value="">make a selection</option>
<option value='1'>Option1</option>
</select>

JavaScript - Dropdown does not work

I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>

You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle

HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.

You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/

Change contents in dropdown using javascript

Think I'm making this harder than it need to be. here is my jsfiddle http://jsfiddle.net/justmelat/pArU7/2/
straight html:
<form>
.
<input type="radio" name="sex" value="House">House
<input type="radio" name="sex" value="Cars">Cars
<hr>
<select name="cars">
<option value="0">--Select--</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="wood">Wood</option>
<option value="audi">Audi</option>
<option value="brick">Brick</option>
</select>
</form>
when user selects house, i only want the select, wood and brick options to appear in the dropdown
of course if cars is selected then wood and brick should disappear.
How can I easily do this in javascript?

Demo: http://jsfiddle.net/33tJR/
Just a quick mockup I made, nothing too fancy using jQuery or anything
function createOption(value) {
el = document.createElement('option');
el.value = value;
el.innerHTML = value;
el.id = value;
document.getElementById('select').appendChild(el);
}
document.getElementById('house').addEventListener('click', function() {
document.getElementById('select').innerHTML = '';
createOption('Volvo');
createOption('Saab');
createOption('Fiat');
});
document.getElementById('cars').addEventListener('click', function() {
document.getElementById('select').innerHTML = '';
createOption('Wood');
createOption('Brick')
});

Use the onchange event of radio button and if the value matches to male , call a javascript which will create the option list and clear the exisiting list and append the new one. All these used jquery
$(document).ready(function(){
$("input[name='sex']").change(function() {
if($(this).value === "male") { loadDLLWithOption1(); }
else { loadDLLWithOption2(); }
}
});
function loadDLLWithOption1()
{
var optionList = '<option>option1</option><option>option2</option>';
$("#cars").html(optionList);
}

Using jquery, what is the best way to get the "next" textbox with a specific class name

i have a bunch of repeating textboxes and comboboxes on an html page. I want to change the value of the textbox below the combobox when i change the combobox. So i have this code so far:
$('.myDropdown').change(function () {
var currentDropdownValue = $(this).val();
if (currentDropdownValue == "Regular") {
//CHANGE TEXTBOX BELOW THIS COMBOBOX WITH CLASS = "QUANTITY" TO 10.
}
});
here is my html
<select class="myDropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input class="quantity" type="text" />
basically, i need to figure out the right selector syntax as i was using "Closest()" but that seems to only go up the DOM tree and not past the current value.

You could use .next() to return the next item or pass it a selector if you are more picky.
$(this).next('.quantity').val(10);
No need for extra DOM Traversing like parent() or such.
Working JSFiddle: http://jsfiddle.net/CXzVe/2/.

You can try next():
$('.myDropdown').change(function () {
var currentDropdownValue = $(this).val();
if (currentDropdownValue == "Regular") {
//CHANGE TEXTBOX BELOW THIS COMBOBOX WITH CLASS = "QUANTITY" TO 10.
$(this).next('.quantity').val('10');
}
});
You may need to jump around your HTML structure a bit if your input field isn't a sibling of your drop-down, such as $(this).parent().next('.quantity').val('10').
Edit: here's a jsFiddle for you.

If you happen to be updating your DOM after the initial load of the page, you'll need to use $.live() or $.delegate() because jQuery is not aware of the change.
JavaScript
$(".manufacturer").live("change", function () {
var currentValue = $(this).val();
if (currentValue && currentValue === "Regular") {
$(".quantity").val("10");
}
});
HTML
<select class="manufacturer">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input class="quantity" type="text" />