Drop down textarea

**robertad28** · 04-16-2012 01:09 PM

below is a code im working on I want the drop downs to change as one is selected and also update the text area
also how would I add more drop downs to the string? thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - NOTE GENERATOR 2.2</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>

</style>

<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var colours = new Array('Black', 'White', 'Blue');
var shapes = new Array('Square', 'Circle', 'Triangle');
var names = new Array('John', 'David', 'Sarah');

switch (ddl1.value) {
case 'Colours':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(document.getElementById(ddl2), colours[i], colours[i]);
}
break;
case 'Shapes':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(document.getElementById(ddl2), shapes[i], shapes[i]);
}
break;
case 'Names':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(document.getElementById(ddl2), names[i], names[i]);
}
break;
default:
document.getElementById(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);
}
function updateTextArea() {
var text = "";
$('input[type=DropDown]:selected').each( function() {
text += $(this).val() + " ";
});
$('input[type=DropDown]:selected').each( function() {
text += $(this).val() + " ";
});
$('#update').val( text );
}

$('input[type=DropDown]').change(function () {
updateTextArea();
});
</script>
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>

<select id="ddl2">
</select>
<body>
<textarea id="dd12" name="update" cols="25" rows="12">

</body>
</html>

**Padonak** · 04-17-2012 12:19 PM

just a draft

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - NOTE GENERATOR 2.2</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
body{text-align:center;}
select{margin-left:5px;margin-right:5px;border:none;}
textarea{overflow:auto;}
</style>
<script type="text/javascript">
var dds=[
['root','Colors','Shapes','Animals'],
//------> ['option text','option value']
['colors',['Crimson',''],['Black',''],['Green','']],
['shapes',['circle',''],['rectangle',''],['triangle',''],['ellips',''],['square','']],
['animals',['cat',''],['mouse',''],['dog',''],['snake',''],['frog','']]
];

function buildSel(){
var arr=(typeof(buildSel.arguments[0])=='undefined')? dds[0] : eval('dds['+buildSel.arguments[0]+']');
/* if no any arguments passed to the function it builds the root(main) select - let's take the first sub-array as root
if argument is passed the function builds the appropriate select
*/
if(arr!=dds[0]){$('#'+dds[0][0]).next().remove();}
if(!$('#'+arr[0]).html()){
var str='',header=(arr==dds[0])?' -- select -- ':arr[0].toUpperCase();
if(arr==dds[0]){for(var i=1;i<arr.length;i++){str+='<option value="'+i+'">'+arr[i]+'</option>'}}
else{for(var i=1;i<arr.length;i++){str+='<option value="'+arr[i][1]+'">'+arr[i][0]+'</option>'}}
$('#selects').append('<select id="'+arr[0]+'" name="'+arr[0]+'"><option value="">'+header+'</option>'+str+'</select>');
$('#tarea').val('This select has just been created from '+arr[0]+' subarray');
$('#'+arr[0]).change(function(){if($(this).val()==''){try{$(this).next().remove();$('#tarea').val('');}catch(e){}}else{var arg=$(this).val().toLowerCase();buildSel(arg);}$(this).blur();});
}
else{$('#tarea').val('');}
}

$(document).ready(function(){
buildSel();
});
</script>
</head>
<body>
<br /><br /><br /><textarea id="tarea" name="update" cols="25" rows="12"></textarea><br /><br /><br />
<div id="selects"></div>
</body>
</html>

Thread: Drop down textarea

Thread Tools

Display

Drop down textarea

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions