Develop Reference

2nd dropdown options determined by 1st dropdown [duplicate]

I need to change the contents of dropdown B based on the selection in dropdown A using javascript. There are no db queries involved--I know beforehand what the contents of B should be given the choice in A. I have found some examples using AJAX, but since there is no db query involved that's not necessary. Can anyone point me to some example code for how to do this?

function configureDropDownLists(ddl1, ddl2) {
var colours = ['Black', 'White', 'Blue'];
var shapes = ['Square', 'Circle', 'Triangle'];
var names = ['John', 'David', 'Sarah'];
switch (ddl1.value) {
case 'Colours':
ddl2.options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(ddl2, colours[i], colours[i]);
}
break;
case 'Shapes':
ddl2.options.length = 0;
for (i = 0; i < shapes.length; i++) {
createOption(ddl2, shapes[i], shapes[i]);
}
break;
case 'Names':
ddl2.options.length = 0;
for (i = 0; i < names.length; i++) {
createOption(ddl2, names[i], names[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
<select id="ddl2">
</select>

Setup mine within a closure and with straight JavaScript, explanation provided in comments
(function() {
//setup an object fully of arrays
//alternativly it could be something like
//{"yes":[{value:sweet, text:Sweet}.....]}
//so you could set the label of the option tag something different than the name
var bOptions = {
"yes": ["sweet", "wohoo", "yay"],
"no": ["you suck!", "common son"]
};
var A = document.getElementById('A');
var B = document.getElementById('B');
//on change is a good event for this because you are guarenteed the value is different
A.onchange = function() {
//clear out B
B.length = 0;
//get the selected value from A
var _val = this.options[this.selectedIndex].value;
//loop through bOption at the selected value
for (var i in bOptions[_val]) {
//create option tag
var op = document.createElement('option');
//set its value
op.value = bOptions[_val][i];
//set the display label
op.text = bOptions[_val][i];
//append it to B
B.appendChild(op);
}
};
//fire this to update B on load
A.onchange();
})();
<select id='A' name='A'>
<option value='yes' selected='selected'>yes
<option value='no'> no
</select>
<select id='B' name='B'>
</select>

Could you please have a look at: http://jsfiddle.net/4Zw3M/1/.
Basically, the data is stored in an Array and the options are added accordingly. I think the code says more than a thousand words.
var data = [ // The data
['ten', [
'eleven','twelve'
]],
['twenty', [
'twentyone', 'twentytwo'
]]
];
$a = $('#a'); // The dropdowns
$b = $('#b');
for(var i = 0; i < data.length; i++) {
var first = data[i][0];
$a.append($("<option>"). // Add options
attr("value",first).
data("sel", i).
text(first));
}
$a.change(function() {
var index = $(this).children('option:selected').data('sel');
var second = data[index][1]; // The second-choice data
$b.html(''); // Clear existing options in second dropdown
for(var j = 0; j < second.length; j++) {
$b.append($("<option>"). // Add options
attr("value",second[j]).
data("sel", j).
text(second[j]));
}
}).change(); // Trigger once to add options at load of first choice

how to append option to a select

I have a variable which contains a number. I'd like to append an option with the numeric value in each based on whatever the variable number is ( ie: if total equals 10, then I need to add 10 options to the select with each option containing the next numeric row value, so 1, 2, 3, 4...etc. I start off with one hard coded option, and then I need to add options dynamically for every case. I've tried a multitude of scripts but I"m getting " cannot use in operator to search for length.
https://jsfiddle.net/v1yyhfm8/
HTML
<select id="main">
<option selected>1</option>
</select>
I tried:
var total = dataSource.total();
for (var i = 1; 1 <= total; i++) {
var added = document.createElement('option');
var test = $('#main');
added.value = i;
added.innerHTML = i;
test.append(added);
}
and
var total = dataSource.total();
$.each(total, function (i, item) {
$('#main').append($('<option>', {
value: item.total,
text: item.text
}));
});

In your code, the for loop condition would be true always which leads to an infinite loop so change it to i <= total.
var total = dataSource.total();
for (var i = 1; i <= total; i++) {
var added = document.createElement('option');
var select1 = $('#main');
added.value = i;
added.innerHTML = i;
select1.append(added);
}
var total = 10;
for (var i = 1; i <= total; i++) {
var added = document.createElement('option');
var select1 = $('#main');
added.value = i;
added.innerHTML = i;
select1.append(added);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="main">
<option selected>1</option>
</select>

Html part :
<select id="main">
</select>
Jquery Part:
var opt = ' <option selected>1</option>';
for(var i = 2; i<= 10; i++){
opt += ' <option>' + i + '</option>';
}
$("#main").append(opt);
Jsfiddle link : https://jsfiddle.net/v1yyhfm8/

Change options value in a drop-down list depending on another selected drop-down list

I have problem to change the value of the options from the code below, select which changes depending on other select, but I want to change the value of the select id = "numbList", thanks ....
<!DOCTYPE html>
<html>
<body>
<select id="diffList" onchange="changeList()">
<option value="">-- Difficulty --</option>
<option value="1">Easy</option>
<option value="2">Medium</option>
<option value="3">Difficult</option>
</select>
<select id="numbList"></select>
<script>
window.difficulty = {};
window.difficulty['1'] = [1,2,3];
window.difficulty['2'] = [4,5,6];
window.difficulty['3'] = [7,8,9];
function changeList() {
var diffList = document.getElementById("diffList");
var numbRange = document.getElementById("numbList");
var selectDiff = diffList.options[diffList.selectedIndex].value;
while(numbRange.options.length)
{
numbRange.remove(0);
}
var diff = window.difficulty[selectDiff];
if(diff)
{
var i;
for(i = 0; i < diff.length; i++)
{
var difficulty = new Option(diff[i], i);
numbRange.options.add(difficulty);
}
}
}
</script>
</body>
</html>

Just use diff[i] for both text and value for option:
...
for(i = 0; i < diff.length; i++)
{
var value = diff[i];
var difficulty = new Option(value, value);
numbRange.options.add(difficulty);
}
...
As the previous value is removed from select options it selects the first of the new options. So you shouldn't need to set the value of numbList.
To set value of numbList programmatically you could just do numbList.value = 1; for example.

Assigning JavaScript variables with HTML drop-down menu (user selection)

I am brand new to JavaScript so please bear with me! I'm building a slider puzzle, and I'm trying to create a form that will allow the user to pick the dimensions of their puzzle. In the past, I've had the variables for row (_r) and column (_c) set to 3 - but what I'd like now is an HTML select table where the user can pick values between 3 and 5 for each and then generate their own table.
I'm just not sure how to properly assign _r and _c based on the user's selection, and everything I've searched related to different HTML forms or wasn't otherwise helpful.
Also, if anyone knows a fix for this: Before I created the form all I had was a "New Game" button (and like I said, _r and _c were both set to 3), when I clicked the New Game button everything worked perfectly, but if I click it again it keeps generating empty tables beneath the original one which refreshes normally. Any ideas how to prevent that? (this is why I have the clearPuzzle function at the end)
Thank you for any insight.
Here is my HTML:
<p>Choose Dimensions: </p>
<select name="Rows" onchange="form()">
<option value="Rows" selected disabled>Rows</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="Columns" onchange="form()">
<option value="Columns" selected disabled>Columns</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" name="button" value="New Game" onclick="init(_r, _c)"></button>
and JavaScript:
/*what I had before with no form function:
_r = 3;
_c = 3;
*/
function form()
{
var _r = document.getElementsByName("Rows")[0].value;
var _c = document.getElementsByName("Columns")[0].value;
}
function init(r, c)
{
form();
var puzzle = new puzzleArray(r, c);
shuffle(puzzle);
displayPuzzle(puzzle);
addClickHandlers();
}
function puzzleArray(r, c)
{
//declare and populate array
var _array = [];
for (var i = 0; i < r*c; i++)
{
_array[i] = i;
}
return _array;
}
function shuffle(_array)
{
//shuffle tiles
for (var i = 0; i < _r*_c; i++)
{
var rand = Math.floor(Math.random() * _array.length);
var temp = _array[rand];
_array[rand] = _array[i];
_array[i] = temp;
}
//check to see if puzzle is solveable
var count = 0;
do {
for (var i = 0; i < _r*_c; i++)
{
for (var j = i; j <= _r*_c; j++)
{
if (_array[j] < _array[i])
{
count++;
}
}
}
} while (Math.floor(count/2) != count/2);
}
function displayPuzzle(anArray)
{
//create table
var table = document.createElement("table");
table.id = "myTable";
for (var i = 0; i < _r; i++)
{
var row = document.createElement('tr');
for (var j = 0; j < _c; j++)
{
var column = document.createElement('td');
row.appendChild(column);
}
table.appendChild(row);
}
document.body.appendChild(table);
//populate cells with their original and shuffled values.
for (var i = 0; i < _r*_c; i++)
{
document.getElementsByTagName("td")[i].innerHTML = "Cell: " + [i] + ", " + "Value: " + anArray[i];
if (anArray[i] == 0)
{
document.getElementsByTagName("td")[i].innerHTML = "Cell: " + [i] + ", " + "Value: " + "Blank!";
}
}
//specify classes for each cell
var _cell = document.getElementsByTagName("td");
for (var i = 0; i < _r*_c; i++)
{
_cell[i].id = "s" + [i];
}
}
function addClickHandlers()
{
for (var i = 0; i < _r*_c; i++)
{
var cells = document.getElementsByTagName("td");
cells[i].onclick = moveTile;
}
}
function moveTile()
{
this.innerHTML += "!!!"; //just experimenting
}
//not working yet
function clearPuzzle()
{
var puzzle = new puzzleArray(r, c);
shuffle(puzzle);
}

I'm concerned that the function form has local variables declarations for variables _r and _c. As local variables, they will be discarded on function exit, whereas I think you are trying to assign to (document) global variables. You should omit the var keyword there. Document global variables should be declared outside of any function scope.
/*what I had before with no form function:
_r = 3;
_c = 3;
*/
var _r; // declare _r & _c as document global variables
var _c;
function form()
{
// assign to the document global variables.
_r = document.getElementsByName("Rows")[0].value;
_c = document.getElementsByName("Columns")[0].value;
}

Figured it out:
form() was en element being used elsewhere, so I changed the function name to sndForm() and also edited the code within that function:
HTML:
<select id = "_rows" onchange="sndForm()">
<option value="Rows" selected disabled>Rows</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="_columns" onchange="sndForm()">
<option value="Columns" selected disabled>Columns</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
JavaScript:
var _r;
var _c;
var row;
var col;
function init(_r, _c)
{
//alert(_r);
//alert(_c);
sndForm();
var puzzle = new puzzleArray(_r, _c);
shuffle(puzzle);
displayPuzzle(puzzle);
//alert(puzzle);
startTimer();
addClickHandlers();
}
function sndForm()
{
row = document.getElementById("_rows");
col = document.getElementById("_columns");
_r = row.options[row.selectedIndex].value;
_c = col.options[col.selectedIndex].value;
}

Replace dropdown options with only those that match values in an array

Hi I am struggling with doing this in raw JavaScript. Currently I have two dropdowns a parent and a child like so:
<select id="state" title="" name="state">
<option selected="selected" value="Open" label="Open">Open</option>
<option value="Closed" label="Closed">Closed</option>
</select>
<select id="status" title="" name="status">
<option value="Open_New" label="New">New</option>
<option value="Open_Assigned" label="Assigned">Assigned</option>
<option value="Closed_Closed" label="Closed">Closed</option>
<option value="Open_Pending Input" label="Pending External Input">Pending External Input</option>
<option value="Open_Pending" label="Pending Internal Input">Pending Internal Input</option>
<option value="Closed_Duplicate" label="Duplicate">Duplicate</option>
<option value="Open_CARD" label="CARD">CARD</option>
<option value="Open_Open" label="Open">Open</option>
<option value="Open_DAD" label="DAD">DAD</option>
<option value="Closed_Rejected" label="Rejected">Rejected</option>
</select>
And the child dropdown values are selected based on the parent dropdown values name with and an underscore:
function updateDynamicEnum(field, subfield){
if(document.getElementById(subfield) != null){
var selector = document.getElementById(subfield);
var de_key = document.getElementById(field).value;
var current = [];
for (var i = 0; i < selector.length; i++) {
if (selector.options[i].selected) current.push(selector.options[i].value);
}
if(de_entries[subfield] == null){
de_entries[subfield] = new Array;
for (var i=0; i<selector.options.length; i++){
de_entries[subfield][selector.options[i].value] = selector.options[i].text;
}
}
document.getElementById(subfield).innerHTML = '';
for (var key in de_entries[subfield]) {
if(key.indexOf(de_key+'_') == 0){
selector.options[selector.options.length] = new Option(de_entries[subfield][key], key);
}
}
for (var key in current) {
for (var i = 0; i < selector.length; i++) {
if(selector.options[i].value == current[key])
selector[i].selected = true;
}
}
}
What I need to do is change this code so that child dropdown values are not selected based on the key name with an underscore but selected when they are part of an array that is passed in. The array is called child_strings and looks like this:
'open' => array(
'Open_New',
'Open_Assigned',
'Open_Pending Input',
'Open_Pending',
'Open_CARD',
'Open_Open',
'Open_DAD'
),
'closed' => array(
'Open_Assigned',
'Closed_Closed',
'Closed_Duplicate',
'Closed_Rejected',
),
my new code looks like this:
function updateDynamicEnum(field, subfield, child_strings){
//console.log(child_strings);
if(document.getElementById(subfield) != null){
var de_key = document.getElementById(field).value;
var child = document.getElementById(subfield);
var current = [];
for (var i = 0; i < child.length; i++) {
if (child.options[i].selected) current.push(child.options[i].value);
}
if(de_entries[subfield] == null){
de_entries[subfield] = new Array;
for (var i=0; i<child.options.length; i++){
de_entries[subfield][child.options[i].value] = child.options[i].text;
}
}
document.getElementById(subfield).innerHTML = '';
//this part needs changes
for (var key in de_entries[subfield]) {
if(key.indexOf(de_key+'_') == 0){
child.options[child.options.length] = new Option(de_entries[subfield][key], key);
}
}
But struggling to see how to check child_strings and determine if the vales is in that array etc..

I figured the answer out for myself but if somebody can post a better one please go ahead.
function updateDynamicEnum(field, subfield, child_strings){
if(document.getElementById(subfield) != null){
var de_key = document.getElementById(field).value;
var child = document.getElementById(subfield);
var current = [];
for (var i = 0; i < child.length; i++) {
if (child.options[i].selected) current.push(child.options[i].value);
}
if(de_entries[subfield] == null){
de_entries[subfield] = new Array;
for (var i=0; i<child.options.length; i++){
de_entries[subfield][child.options[i].value] = child.options[i].text;
}
}
document.getElementById(subfield).innerHTML = '';
var arg = child_strings[de_key];
for (var key in de_entries[subfield]) {
if(isInArray(key,arg)){
child.options[child.options.length] = new Option(de_entries[subfield][key], key);
}
}
for (var key in current) {
for (var i = 0; i < child.length; i++) {
if(child.options[i].value == current[key])
child[i].selected = true;
}
}
}
/*Checks if value is in an array*/
function isInArray(value, array) {
return array.indexOf(value) > -1;
}
}