...

View Full Version : Changing Title With HTML?



satr0p
01-08-2012, 11:25 AM
Right then!

I have a drop down list. The titles are really long. What I want to happen is, end user to click on a selection, i.e.

"This is a really really long title"

And then by the power of voodoo just the abbreviated is shown in the field.

"TIARRLT"

Can this be done by JUST HTML? Or am I looking at some JS here? If anyone could point me to a tutorial that would be great. Or if you have the code you don't mind sharing... amazing!!!

Thanks all!

VIPStephan
01-08-2012, 12:17 PM
No, not with HTML, you need JS.

Philip M
01-08-2012, 04:32 PM
Is this what you want?


<select id = "myselect" onchange = "initials(this)">
<option>Select a title...</option>
<option>This is a really really long title</option>
<option>Another excessively long title</option>
<option>This title is really absurdly long</option>
<option>'Twas brillig and the slithy toves did gibe and gimble in the wabe</option>
<option>Seventy-six trombones in the big parade</option>
<option>7000 Leagues under the sea</option>
</select>

<script type = "text/javascript">
var si = 0;
var otxt = "";
function initials(which) {
if (si > 0) { // previously selected index
document.getElementById("myselect").options[si].text = otxt; // reinstate previously selected option text
}
si = which.selectedIndex; // currently selected index
if (si > 0) {
otxt = which.options[si].text;
var otxt1 = otxt.replace(/-/g," "); // replace hyphen by space
otxt1 = otxt1.replace(/(\d)(\d)/g,"$1 $2"); // split up numbers with space
otxt1 = otxt1.replace(/(\d)(\d)/g,"$1 $2"); // do it twice!
otxt1 = otxt1.replace(/[^a-z0-9\s]/gi,""); // eliminate special characters such a '
var txtArray = otxt1.split(" ");
var shortText = "";
for (var i = 0; i<txtArray.length; i++) {
shortText += (txtArray[i].substring(0,1)).toUpperCase();
}
document.getElementById("myselect").options[si].text = shortText;
alert (shortText);
}

}

</script>
I am doubtful as to the actual utility of this - the value used to send to the server can be either the option value (not text), or the selected index.
So the option value of "This is a really really long title" could be defined as "TIARRLT", and its selectedIndex is 1.


"Good judgment comes from experience and experience comes from bad judgment."

satr0p
01-08-2012, 06:20 PM
This is SO close to what I need. But I need to be a able to control what the options are shorted to, so.

"This is a really really long title"

when selected could be "PTA" or if I want to I could change it in a months time to, "SMA". In short I make up the abbreviations.

ANd thank you very much for doing this.

Philip M
01-08-2012, 06:41 PM
This is SO close to what I need. But I need to be a able to control what the options are shorted to, so.

"This is a really really long title"

when selected could be "PTA" or if I want to I could change it in a months time to, "SMA". In short I make up the abbreviations.

ANd thank you very much for doing this.

That is not what you asked for! You asked for the title to be abbreviated to the inital letters of each word. :( Not to some arbitrary code.
Here you are:-


<select id = "myselect" onchange = "initials(this)">
<option>Select a title...</option>
<option>This is a really really long title</option>
<option>Another excessively long title</option>
<option>This title is really absurdly long</option>
<option>'Twas brillig and the slithy toves did gibe and gimble in the wabe</option>
<option>Seventy-six trombones in the big parade</option>
<option>7000 Leagues under the sea</option>
</select>

<script type = "text/javascript">
var si = 0;
var otxt = "";
function initials(which) {
if (si > 0) { // previously selected index
document.getElementById("myselect").options[si].text = otxt; // reinstate full text of previously selected index
}
si = which.selectedIndex;
if (si > 0) { // current selected index
otxt = which.options[si].text;

switch(si) {
case 1: shortText = "ABC"; break;
case 2: shortText = "DEFG"; break;
case 3: shortText = "HIJKL"; break
case 4: shortText = "MNOPQ"; break;
case 5: shortText = "RST"; break;
case 6: shortText = "WXYZ"; break;
}

document.getElementById("myselect").options[si].text = shortText;
alert (shortText);
}

}

</script>

To be candid I do not see the point of this at all. :( What is the point of changing the abbreviations at intervals?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum