...

View Full Version : how to make html:select tag box copy pastable



ashish chaudhar
07-22-2011, 12:17 PM
I have a html:select tag box and I want to make it copy pastable directly from an excel sheet or notepad so as to dynamically updating its options, is it possible. Current code has html:select box separately and below this another text box is there, where i fill the numeric value, then press add button below and then it gets updated in the html:select tag box.

Is it possible to copy from some list of numeric values and then directly paste into the html:select and the array list gets updated from this pasted list.

Thanks in advance fro your replies.

chump2877
07-22-2011, 01:39 PM
There is no way to paste text directly into an HTML select menu element.

If you really wanted to accomplish something like that, you'd need to create some kind of JS-enhanced "combo-box" that allows you to type (and paste text) directly into the select menu.

These links can get you started:

http://www.google.com/search?client=opera&rls=en&q=javascript+select+box&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest#sclient=psy&hl=en&safe=off&client=opera&rls=en&channel=suggest&source=hp&q=javascript+editable+combobox&aq=f&aqi=g1&aql=&oq=&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=c99a1973f6c67dac&biw=1346&bih=870
http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

But, actually, I would discourage this kind of thing (if possible) because it's an uncommon and potentially confusing user interface -- especially the interface that you have described. (People do not instinctively think or know to paste text into a drop down menu.)

xelawho
07-23-2011, 02:52 AM
... although pasting the desired items into the input box separated by line breaks (or whatever other separator you wanted to use) then loading them all into the select box at the click of one button shouldn't be too hard, weird or confusing. Is that what you wanted to do?

xelawho
07-23-2011, 02:31 PM
well, I guess not.

just for fun, here's one way to do what I suggested above. The code that separates the lines breaks is this:
var dropdowns=items.split(/\n|\r/g);

which, like I say, you could change to be commas or spaces or whatever.

of course, if you wanted your selection to actually do something, that would require some extra coding....



<html>
<head>
<script type="text/javascript">




function fillList() {
document.myform.selectlist.options.length=1;
items=document.getElementById("rawinputs").value;
var dropdowns=items.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++) {
var optn = document.createElement("OPTION");
optn.text = dropdowns[k];
document.myform.selectlist.options.add(optn);
}
}

function showOption() {
number= document.myform.selectlist.selectedIndex;
name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
alert("you chose option " + number +", "+name)
}

</script>
</head>
<body>
<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
<textarea rows="10" columns="20" id="rawinputs"></textarea>
<input type="button" value="Fill List" onclick="fillList()"></input>
</body>
</html>

chump2877
07-23-2011, 04:18 PM
well, I guess not.

just for fun, here's one way to do what I suggested above. The code that separates the lines breaks is this:
var dropdowns=items.split(/\n|\r/g);

which, like I say, you could change to be commas or spaces or whatever.



That user interface makes more sense to me, and makes it more intuitive.

A note about the code: You could change this:


for (var k=0; k<dropdowns.length; k++) {
var optn = document.createElement("OPTION");
optn.text = dropdowns[k];
document.myform.selectlist.options.add(optn);
}

to this:


for (var k=0; k<dropdowns.length; k++) {
document.myform.selectlist.options[k+1]=new Option(dropdowns[k], k);
}

Just to make things simpler :)

chump2877
07-23-2011, 04:55 PM
Just for fun (again), here is an idea I came up with quickly that perhaps is more intuitive than pasting directly into a combo/select box, requires relatively little code, and is more along the lines of what ashish is looking for (only tested code in Firefox):


<html>
<head>
</head>
<body>

<form name="myform">
<textarea id="rawinputs">Paste text</textarea><br />
<select id="selectlist">
<option>select an option</option>
</select>
</form>

<script type="text/javascript">
function fillList()
{
document.myform.selectlist.options.length = 1;
var dropdowns = this.value.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++)
{
document.myform.selectlist.options.add(new Option(dropdowns[k], k));
}
this.value = 'Paste text';
adjustTextboxSize();
}

function adjustTextboxSize()
{
optionList.style.width = document.myform.selectlist.offsetWidth+"px";
optionList.style.height = document.myform.selectlist.offsetHeight+"px";
}

var optionList = document.getElementById('rawinputs');
optionList.onfocus = function() {this.value = '';}
optionList.onblur = function() {this.value = 'Paste text';}
optionList.onchange = fillList;

window.onload = adjustTextboxSize;
</script>

</body>
</html>

xelawho
07-23-2011, 10:08 PM
mmmmm... no button required. tasty. :thumbsup:

xelawho
07-25-2011, 04:57 AM
... and (being that the fun doesn't have to stop there), here's a way to add values to the options, so that you could actually use them to do something...


<html>
<head>
<script type="text/javascript">


newdrops=[];

function fillList() {
document.myform.selectlist.options.length=1;
newdrops.length=0;
items=document.getElementById("rawinputs").value;
var dropdowns=items.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++) {
var bits=dropdowns[k].split(",");
var drops= {
text:bits[0],
value:bits[1]
}
newdrops.push(drops);
}


for (var i=0; i<newdrops.length; i++) {
document.myform.selectlist.options[i+1]=new Option(newdrops[i].text, newdrops[i].value, i);
}
}


function showOption() {
age= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].value;
name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
alert(name+"'s age is " + age)
}

</script>
</head>
<body>
<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
<div style="overflow:auto">
<div style="float:left"><textarea rows="10" columns="20" id="rawinputs"></textarea></div>
<div style="float:left; margin-left:10px">Enter the name of a family member, then a comma, then their age. <br>Start each new family member on a new line (use the enter key). Example: <br>
dad,66<br>
mum,62<br>
sis,27<br>
bro,29<br><br>
When you are finished hit the "Fill List" button.</div>
</div>
<div><input type="button" value="Fill List" onclick="fillList()"></input></div>
</body>
</html>

chump2877
07-25-2011, 07:07 AM
The options in my code do have values:


new Option(dropdowns[k], k)

http://www.javascriptkit.com/jsref/select.shtml

:)


Edit: Oh I see what you did after running your code...My option values are just ascending integers, whereas you allow custom values...Nice going :)

xelawho
07-26-2011, 02:15 AM
yup... which makes it possible to do really useful stuff like this:


<html>
<head>
<script type="text/javascript">


newdrops=[];
var totalAge=0;

function fillList() {
document.myform.selectlist.options.length=1;
newdrops.length=0;
items=document.getElementById("rawinputs").value;
var dropdowns=items.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++) {
var bits=dropdowns[k].split(",");
var drops= {
text:bits[0],
value:parseFloat(bits[1])
}
newdrops.push(drops);
}
for (var i=0; i<newdrops.length; i++) {
var optn = document.createElement("OPTION");
optn.text = newdrops[i].text;
optn.value = newdrops[i].value;
document.myform.selectlist.options.add(optn);
}
for (var i=0; i<newdrops.length; i++) {
totalAge=totalAge+newdrops[i].value;
}
Avage=totalAge/newdrops.length;
document.getElementById("averages").innerHTML="The average age of your family is "+ Avage+" years old";
}

function showOption() {
chosen=document.myform.selectlist.options[document.myform.selectlist.selectedIndex];
age= chosen.value;
name= chosen.text;
document.getElementById("results").innerHTML=name+"'s age is " + age;
document.getElementById("sameage").innerHTML="";
for (var j=0; j<newdrops.length; j++) {
if ((newdrops[j].value==chosen.value)&&(!(newdrops[j].text==chosen.text))) {
document.getElementById("sameage").innerHTML+=newdrops[j].text+"<br>";
}
}
if (!(document.getElementById("sameage").innerHTML=="")){
document.getElementById("sameintro").innerHTML="People who are the same age as "+chosen.text+" are:<br>";
} else {
document.getElementById("sameintro").innerHTML="";
}
}

</script>
</head>
<body>
<div style="overflow:auto">
<div style="float:left">
<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form></div>
<div style="float:left; margin-left:10px"><input type="button" value="Fill List" onclick="fillList()"></input></div>
</div>
<div style="overflow:auto">
<div style="float:left"><textarea rows="10" columns="20" id="rawinputs">Dad,66
Mum,62
Uncle John,66
Aunt Gladys,62
Grandpa,90
Uncle Bob,62</textarea></div>
<div style="float:left; margin-left:10px">Enter the name of a family member, then a comma, then their age. <br>Start each new family member on a new line like in the example on the left. <br>
When you are finished, hit the "Fill List" button. <br>
Finally, select a family member from the drop down list.
<div id="averages"style="margin-top:5px"></div>
<div id="results" style="margin-top:5px"></div>
<div id="sameintro"></div>
<div id="sameage"></div>
</div>
</div>

</body>
</html>

which would have taken about 5 seconds to do in the original Excel file that you were pasting from

but I guess you can probably mark this one as "resolved", ashish...



ashish?

:eek:

ashish chaudhar
07-26-2011, 03:19 PM
Thanks a lot to both of you chump2877 and xelawho, for such a great response!

Now i want one more thing is that i want to append the new entries in the select list, not overwriting the existing ones in the select list, every time i can copy and pate a new list of numeric values from excel into the text area"rawinputs" and this list must be added into the existing entries in the selectlist.

chump2877
07-26-2011, 04:47 PM
Ashish, would be happy to oblige, but which version of the code are you now using?

ashish chaudhar
07-27-2011, 07:31 AM
i am using this.................

<html>
<head>
<script type="text/javascript">




function fillList() {
document.myform.selectlist.options.length=1;
items=document.getElementById("rawinputs").value;
var dropdowns=items.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++) {
document.myform.selectlist.options[k+1]=new Option(dropdowns[k], k);
}
}

function showOption() {
number= document.myform.selectlist.selectedIndex;
name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
alert("you chose option " + number +", "+name)
}

</script>
</head>
<body>
<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
<textarea rows="10" columns="20" id="rawinputs"></textarea>
<input type="button" value="Fill List" onclick="fillList()"></input>
</body>
</html>

chump2877
07-27-2011, 08:52 AM
I think something like this is what you are looking for:


<html>
<head>
</head>
<body>
<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
<textarea rows="10" columns="20" id="rawinputs"></textarea>
<input type="button" value="Add To List" onclick="fillList()"></input>
<script type="text/javascript">
// Global fields
var ddMenu = document.myform.selectlist;

// Functions
function fillList()
{
var menuLength = ddMenu.options.length;
var items = document.getElementById("rawinputs");
var dropdowns = items.value.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++)
{
ddMenu.options[k+menuLength] = new Option(dropdowns[k], k+menuLength-1);
}
items.value = "";
}

function showOption()
{
var number = ddMenu.selectedIndex;
var name = ddMenu.options[ddMenu.selectedIndex].text;
alert("you chose option " + number +", "+name)
}
</script>
</body>
</html>

ashish chaudhar
07-28-2011, 07:40 AM
how to limit the numerals in per line to 11 digits only in this script, i tried with wrap attribute but its not working for me............

as usual your replies are appreciable...................

ashish chaudhar
07-28-2011, 07:46 AM
I also want a really good explanation, that why it is not possible to make a html:select list box copy pastable directly from a notepad or excel sheet................. please help me...........

chump2877
07-28-2011, 08:17 AM
how to limit the numerals in per line to 11 digits only in this script, i tried with wrap attribute but its not working for me............

as usual your replies are appreciable...................

Do you want the extra digits on each line truncated (after the 11th digit), or do you want extra digits to be processed as if they were another line in the textarea? Or do you simply want to reject the pasting/adding of text if any line in the textarea exceeds 11 characters?

Also, what are you using this for? It would help for me to understand the application of this code.

chump2877
07-28-2011, 08:39 AM
I also want a really good explanation, that why it is not possible to make a html:select list box copy pastable directly from a notepad or excel sheet................. please help me...........

By default, you can't type text into an HTML select menu. It's simply not possible. Subsequently, this means that you also can't paste text into an HTML select menu.

As far as why that is the case: The W3C maintains the standards and specifications for HTML, including how HTML select elements behave/operate: http://www.w3.org/TR/html4/interact/forms.html#h-17.6.

To allow text to be entered into a drop down menu, you would have to create your own, custom "combobox" using JavaScript (as I explained earlier). For example: http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html. While the example doesn't do exactly what you require, it does accommodate the entering of text in a similar way: It pairs a HTML text box with an invisible, scrollable DIV element (that contains the menu options) through the use of JavaScript. The combined result is something that looks like an HTML select element, but it in fact is not.

ashish chaudhar
07-28-2011, 11:17 AM
Yes I simply want to reject the pasting/adding of text in a line if any line in the textarea exceeds 11 characters

ashish chaudhar
07-28-2011, 11:24 AM
Oops! I hope the truncating the digits after 11 digits would be a better option here............

chump2877
07-28-2011, 11:36 AM
Oops! I hope the truncating the digits after 11 digits would be a better option here............


<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TITLE</title>
</head>
<body>
<form name="myform">
<p><select id="selectlist" onchange="showOption()">
<option value="default">select an option</option>
</select></p>
<p><textarea rows="10" columns="20" id="rawinputs"></textarea><input type="button" value="Add To List" onclick="fillList()" /></p>
</form>
<script type="text/javascript">
// Global fields
var ddMenu = document.myform.selectlist;

// Functions
function fillList()
{
var menuLength = ddMenu.options.length;
var items = document.getElementById("rawinputs");
var dropdowns = items.value.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++)
{
ddMenu.options[k+menuLength] = new Option(dropdowns[k].substring(0,11), k+menuLength-1);
}
items.value = "";
}

function showOption()
{
var number = ddMenu.selectedIndex;
var name = ddMenu.options[ddMenu.selectedIndex].text;
alert("you chose option " + number +", "+name)
}
</script>
</body>
</html>

xelawho
08-01-2011, 08:50 PM
... but if you can't decide between deleting or truncating, you could leave the decision to the user...


<html>
<head>
</head>
<body>
<form name="myform"><select id="selectlist" onchange="showOption()"><option>select an option</option></select></form>
<textarea rows="10" cols="20" id="rawinputs"></textarea>
<input type="button" value="Fill List" onclick="fillList()"></input>
<input type="checkbox" onclick="changeBox()" id="startover"></input>Start new list

<script type="text/javascript">

function changeBox () {
if (document.getElementById("startover").checked==true) {
document.myform.selectlist.options.length=1;
document.getElementById("rawinputs").value="";
}
}

function fillList() {
items=document.getElementById("rawinputs").value;
document.getElementById("rawinputs").value=""
var dropdowns=items.split(/\n|\r/g);
for (var k=0; k<dropdowns.length; k++) {
var optn = document.createElement("OPTION");
optn.text = dropdowns[k];
if (optn.text.length>11) {
var r=confirm('Maximum 11 characters allowed. Item "'+optn.text+'" has '+optn.text.length+' characters.' + '\n' + 'Press OK

to shorten it to 11 characters.' + '\n' + 'Press Cancel to delete it completely.');
if (r==true)
{
optn.text = dropdowns[k].substring(0,11);
}
if (r==false)
{
continue;
}
}

document.myform.selectlist.options.add(optn);

document.getElementById("rawinputs").value+=optn.text+"\n";
}
document.getElementById("startover").checked=false;
}

function showOption() {
number= document.myform.selectlist.selectedIndex;
name= document.myform.selectlist.options[document.myform.selectlist.selectedIndex].text;
alert("you chose option " + number +", "+name)
}
</script>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum