Share on Google+Share on Google+

kripa
select option with text facility
5 Answer(s)      8 years ago
Posted in : JSP-Servlet

Ads

View Answers

March 23, 2009 at 12:05 AM


Hi friend,

Code to help in solving the problem :

<HTML>
<HEAD>
<TITLE>Editable Dropdown / Listbox / Combobox - HTML, JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function keyDown(getdropdown, e)
{
checkFn(getdropdown);
var vEventKeyCode = keyCode(e);
// Press left/right arrow keys
if(vEventKeyCode == 37)
{
fnLeftToRight(getdropdown);
}
if(vEventKeyCode == 39)
{
fnRightToLeft(getdropdown);
}

// Delete key pressed
if(vEventKeyCode == 46)
{
fnDelete(getdropdown);
}

// backspace key pressed
if(vEventKeyCode == 8 || vEventKeyCode==127)
{
if(e.which) //Netscape
{
//e.which = ''; //this property has only a getter.
}
else //Internet Explorer
{
//To prevent backspace from activating the -Back- button of the browser
e.keyCode = '';
if(window.event.keyCode)
{
window.event.keyCode = '';
}
}
return true;
}

// Tab key pressed, use code below to reorient to Left-To-Right flow, if needed
//if(vEventKeyCode == 9)
//{
// fnLeftToRight(getdropdown);
//}
}

function fnLeftToRight(getdropdown)
{
getdropdown.style.direction = "ltr";
}

function fnRightToLeft(getdropdown)
{
getdropdown.style.direction = "rtl";
}

function fnDelete(getdropdown)
{
if(getdropdown.options.length != 0)
// if dropdown is not empty
{
if (getdropdown.options.selectedIndex == vEditableOptionIndex_A)
// if option the Editable field
{
getdropdown.options[getdropdown.options.selectedIndex].text = '';
getdropdown.options[getdropdown.options.selectedIndex].value = '';
}
}
}


March 23, 2009 at 12:06 AM


function keyCode(e)
{
if(e.which)
{
keycode=e.which; //Netscape
}
else
{
keycode=e.keyCode; //Internet Explorer
}

//alert("keyCode"+ keycode);
return keycode;
}

function charKeyFn(e)
{
keycode = keyCode(e);
if((keycode==8)||(keycode==127))
{
character="backspace"
}
else if((keycode==46))
{
character="delete"
}
else
{
character=String.fromCharCode(keycode);
}
//alert("FindKey"+ character);
return character;
}

function checkFn(getdropdown)
{
if(vEditableOptionIndex_A>(getdropdown.options.length-1))
{
alert("PROGRAMMING ERROR: The value of variable vEditableOptionIndex_... cannot be greater than (length of dropdown - 1)");
return false;
}
}
</SCRIPT>


March 23, 2009 at 12:07 AM



<SCRIPT LANGUAGE="JavaScript">



var vEditableOptionIndex_A = 0;



var vEditableOptionText_A = "--?--";



var vPreviousSelectIndex_A = 0;


var vSelectIndex_A = 0;


var vSelectChange_A = 'MANUAL_CLICK';


function changeFn(getdropdown)
{
checkFn(getdropdown);

vPreviousSelectIndex_A = vSelectIndex_A;

vSelectIndex_A = getdropdown.options.selectedIndex;


if ((vPreviousSelectIndex_A == (vEditableOptionIndex_A)) && (vSelectIndex_A != (vEditableOptionIndex_A))&&(vSelectChange_A != 'MANUAL_CLICK'))

{
getdropdown[(vEditableOptionIndex_A)].selected=true;
vPreviousSelectIndex_A = vSelectIndex_A;
vSelectIndex_A = getdropdown.options.selectedIndex;
vSelectChange_A = 'MANUAL_CLICK';

}
}

function pressFn(getdropdown, e)
{
checkFn(getdropdown);

keycode = keyCode(e);
keychar = charKeyFn(e);


if ((keycode>47 && keycode<59)||(keycode>62 && keycode<127) ||(keycode==32))
{
var vAllowableCharacter = "yes";
}
else
{
var vAllowableCharacter = "no";
}


if(getdropdown.options.length != 0)

if (getdropdown.options.selectedIndex == (vEditableOptionIndex_A))

{

var vEditString = getdropdown[vEditableOptionIndex_A].value;


if((vAllowableCharacter == "yes")||(keychar=="backspace"))
{
if (vEditString == vEditableOptionText_A)
vEditString = "";
}
if (keychar=="backspace")
{
vEditString = vEditString.substring(0,vEditString.length-1);


vSelectChange_A = 'MANUAL_CLICK';

}


if (vAllowableCharacter == "yes")

{
vEditString+=String.fromCharCode(keycode);


var i=0;
var vEnteredChar = String.fromCharCode(keycode);
var vUpperCaseEnteredChar = vEnteredChar;
var vLowerCaseEnteredChar = vEnteredChar;


if(((keycode)>=97)&&((keycode)<=122))

vUpperCaseEnteredChar = String.fromCharCode(keycode - 32);



if(((keycode)>=65)&&((keycode)<=90))

vLowerCaseEnteredChar = String.fromCharCode(keycode + 32);

if(e.which)
{

for (i=0;i<=(getdropdown.options.length-1);i++)
{
if(i!=vEditableOptionIndex_A)
{
var vReadOnlyString = getdropdown[i].value;
var vFirstChar = vReadOnlyString.substring(0,1);
if((vFirstChar == vUpperCaseEnteredChar)||(vFirstChar == vLowerCaseEnteredChar))
{
vSelectChange_A = 'AUTO_SYSTEM';

break;
}
else
{
vSelectChange_A = 'MANUAL_CLICK';

}
}
}
}
}

// Set the new edited string into the Editable option
getdropdown.options[vEditableOptionIndex_A].text = vEditString;
getdropdown.options[vEditableOptionIndex_A].value = vEditString;

return false;
}
return true;
}


March 23, 2009 at 12:07 AM


function keyUpFn(getdropdown, e)
{
checkFn(getdropdown);

if(e.which) // Netscape
{
if(vSelectChange_A == 'AUTO_SYSTEM')
{

getdropdown[(vEditableOptionIndex_A)].selected=true;
}

var vEventKeyCode = keyCode(e);
// if [ <- ] or [ -> ] arrow keys are pressed, select the editable option
if((vEventKeyCode == 37)||(vEventKeyCode == 39))
{
getdropdown[vEditableOptionIndex_A].selected=true;
}
}
}



</SCRIPT>


March 23, 2009 at 12:08 AM


</HEAD>
<BODY>
<FORM name="selectFrm" method="post">
<center>
<br>
<SELECT name="user" id="user" style="" onKeyDown="keyDown(this, event);" onKeyUp="keyUpFn(this, event); return false;" onKeyPress = "return pressFn(this, event);" onChange="changeFn(this, event);">
<OPTION value=""></OPTION>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
</SELECT>
<br>
</center>
</FORM>
</BODY>
</HTML>

Thanks









Related Tutorials/Questions & Answers:
select option with text facility - JSP-Servlet
select option with text facility  Hello. My doubt is regarding how to provide facility to add text in a drop down box ie(select tag in html )in a jsp... the select in html and if the user wants also to directly type the option instead
validate select option jquery
validate select option jquery  How to Validate select option in JQuery
Advertisements
select option - JDBC
select option  how to dynamically generate the select option values from database
select option value
select option value  if i select a value of any drop down...("Select * from country"); while(rs.next()){ %> <option value... id='state'> <select name='state' > <option value='-1
select option value
select option value  if i select a value of any drop down then that value should be used in a select query of the next dropdown in jsp on same page... buffer="<select name='state' ><option value='-1'>Select</option>
jsp drop down-- select Option
;nbsp;</td> <select name="sel"><option value=""><---Select..."); String buffer="<select name='state'><option value='-1'>Select<...jsp drop down-- select Option  how to get drop down populated
jQuery change event with multiple select option
;; $("select option:selected").each(function () { str += $(this).text...jQuery change event with multiple select option In this tutorial , we...; it also display the selected option. In the below example a multiple select list
How to add another option to the select tag using struts2 tag - Struts
How to add another option to the select tag using struts2 tag  Hi, How to add another option to select tag using tag. My scenario is : If the logged in user is admin then drop down should contain the normal list
select box and text box validations
select box and text box validations  hi, any one please tell me how to set validations for select box and text boxes using bean classes? thank you   Please visit the following link: http://www.roseindia.net/jsp/user
Add values of drop down menu( select option) to mysql table
Add values of drop down menu( select option) to mysql table   Here...['valveId'].'<td>'; echo '<select name="onoff">'; echo '<option value="ON">ON'; echo '</option>'; echo '<option
Javascript get Date And Selected Option Text
Javascript get Date And Selected Option Text In this tutorial we will learn... to get the selected option text and displayed in Javascript. This tutorial explains you that how to display the date and the selected option text in Javascript
how to create text file from jsp and provide downlode option
of this page in text file and also downlode option of this text field thanks...how to create text file from jsp and provide downlode option  HI... in java/j2ee tech. my question is who do i make a jsp output in the form of text
add text box and select list dynamically and get its value to store it into database using jsp request parameter
add text box and select list dynamically and get its value to store... dynamically added text field but want code to retrive value of dynamically added select box also into next jsp page plz reply me as early as posssible
sir plz help in design a jsp page whichis as follow username [_____] select [__>]password [_____] after selection then onlypassword text box is visible
sir plz help in design a jsp page   sir plz help in design a jsp page which is as follow username [ _ ] select [ > ] password [ _ ] after selection then only password text box is visible
PHP Form Part-6 - How to Deals with Text Boxs
button does not give the choice to the users to select multiple option...Topic : HTML FORM - How to Deal with Text Boxs in PHP Part - 6 In the previous part of HTML FORM tutorial, we learned how to deal with text box.  
The option tag
In this section, you will learn about the option tag of Spring form tag library
Select from select list + display
Select from select list + display  i have a select list containing... select EmpCode from the select list, the corresponding EmpName and DeptName should be displayed automatically in empty text fields. I am using struts 1.2
how to use JOptionPane.YES_NO_OPTION
how to use JOptionPane.YES_NO_OPTION  As i said earliar i am making HRMS , the last phase is logout button. when logout button is clicked , an option dialog should appear which ask for yes or no . PROBLEM is i dont know how
Option Box Value - Java Beginners
Option Box Value  Hi Friends, I have one option box which is division, division have dynamically data,if user select any division then his option box is populated (work schedule,Peronal Area,personal sub area,business
iPhone Text Field Border 
adding will select each text field and then go to tools -> attributes Inspector...Text Field Boarder  In this tutorial will learn about the text field Boarder, we can set the boarder of text field by selecting the text field
how to calculate the price on the option box
how to calculate the price on the option box  How i calculate the value when i using a option box with 2 option..first option i used for product name and for the second i used for the quantity..which function should i used
Column select
Column select   How i fetch Experience wise resume?   ... or no. Then using the query select * from resumes where experience='yes', fetch all the data...("jdbc:mysql://localhost:3306/test", "root", "root"); String query = "select * from
How to show autocomplete textbox values on combo box option selection using database?
How to show autocomplete textbox values on combo box option selection using database?  When I select option(i.e First Year) then it will show list of student names in auto-complete text box
nested select tag
("count"); String buffer="<select name='state'><option value='-1'>...nested select tag  My requirement is as follows suppose combobox to select country whenever i select a country it will show corresponding states
Option onclick am not getting the value ..
Option onclick am not getting the value ..    function get_val( tot_val ) { document.getElementById('TextBox1').value = tot_val; } <..." rows="5" cols="20">   Here is a simple code that insert some text
Select Box Validation in JavaScript
and option tag inside the select tag is for available option in the list.... Select Box allow user to select one or more values from available option.... Example : How to Create Select Box: <select> <option value="Delhi">
For every option selected from a dropdown a new textbox opens
For every option selected from a dropdown a new textbox opens  I have a dropdown with four options, each time I select an option a new text box...;select name="sel" onchange="generateTextbox();"> <option value="C/C++">
SET and SELECT
SET and SELECT  hello, What is difference between SET & SELECT in sql????   hii, SET : The set statement is used to the update query. SELECT : The select statement is used to display the all data's in the table
Multiple select box
Multiple select box  Hi, I need help in code for multiple select box. The multiple select box should be populated with the db values.The selection done in the multiple select box is to be moved to the text area provided a add
Use of Text Field
to allow the user to select one option out of a number of choices. Example... option out of many given choices. Example Text Area: A text area is an area... Use of Text Field, Text box, Text Area, Checkbox,Dropdownlist and Radio
select query
select query  how to retrieve a single image from mysql table using $row[] value
Tutorials   
Java Spring Hibernate Struts Training fat image from db fat image from db fat image from db fat image from db unable to get value returned from javascript variable in page How to change image size before adding to mysql using jsp Design a registration.jsp page with input for user registration details Cart Quantity jsp servlet coding issue servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? servlet,jsp login registration forms without database in ecalipse ide using hashmap to store the registraion details ? image pdf marking pdf marking Multiple image upload using JSP Read code from excel sheet and upload into database using JSP Student java about search engine Convert BLOB to PDF and save it to a location how to copy files from remote to local machine using SFTP SSL in java? Like Team viewer Socket and Servert -Jsp how to copy files from remote location to local using java? How To Store Multilple Images In MySQL database dynamically with image uploader and then retrieve them in image gallery using java how to create SOAP based web service in java? how to fetch data from mysql database table and draw a bar chart on that data using in jsp how to create users in LDAP using java? how to authenticate user using TIVOLI api in java? how to create users using IBM Tivoi API in jsp/servelet? Java/J2ee Please explain this code as many packages and classes are unknown to me .! how to download the uploaded folder files using jsp Login Query image is display from path of mysql database please reply the code to store dynamic fields in database? Reloading issue in jsp How to get Button Id ? calling one jap page from another jsp page login login Problem to get connection from DAO class to JDBC Page Loading Time Fix table's column's name row(1st row of the table) so that it does not move up when the table is scrolled up to view more rows below Sending hidden values

Ads

 
Advertisement null

Ads