List item based display of input text

**RamananKalirajan** · Aug 12 '08, 05:00 AM

Hi Vikas I give u a example which matches ur criteria from that u just write ur own code.

[HTML]<html>
<head>
<script type="text/javascript">
function doThis()
{
var sel = document.getEle mentById('mySel ect1').selected Index;
// alert(sel);
if(sel==0)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Apple";
else if(sel==1)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Orange";
else if(sel==2)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Mango";
else if(sel==3)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Grape";
else
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Pine";

}
</script>
</head>
<table>
<tr>
<td>
<select id="mySelect1" size="10" onclick="doThis ()">
<option>Apple </option>
<option>Orang e</option>
<option>Mango </option>
<option>Grape </option>
<option>Pine</option>
</select>
</td>
<td>
<div id="myDiv">
</div>
</td>
</tr>
</table>
</html>[/HTML]

If any doubts post it back I will try to help u out

Regards
Ramanan Kalirajan

**vikas251074** · Aug 12 '08, 05:38 AM

Thanks for very quick response.

I think this example will suit me best. I shall try my best

OK thanks again.

Vikas

**RamananKalirajan** · Aug 12 '08, 05:43 AM

Originally posted by vikas251074

Thanks for very quick response.

I think this example will suit me best. I shall try my best

OK thanks again.

Vikas

Ok. No Probs. All the best. If u struck up. pls post it to the forum. I will try to help u out.

Regards
Ramanan Kalirajan

**vikas251074** · Aug 12 '08, 06:27 AM

Yes I have done it.

But I can't display input box and
list box which is created dynamically from table.

**RamananKalirajan** · Aug 12 '08, 08:50 AM

Originally posted by vikas251074

Yes I have done it.

But I can't display input box and
list box which is created dynamically from table.

Sorry Yaar, I can't get your requirement. In the place of displaying some text u want to display a input box or an list box. Is this your requirement.

Regards
Ramanan Kalirajan

**vikas251074** · Aug 12 '08, 10:38 AM

Yes!!! you are right.

**RamananKalirajan** · Aug 12 '08, 11:06 AM

Originally posted by vikas251074

Yes!!! you are right.

For that case u have to go for DOM. You can create an element dynamically, using document.create Element('input' ); likewise u can do. If u want I can give u an example for that, which matches ur requirement otherwise surf w3schools to know about it.

Regards
Ramanan Kalirajan

**vikas251074** · Aug 12 '08, 11:23 AM

DOM!!!! ?

Document Object Model !!!

How ???

Is it easy to use DOM?

Help !!!

Vikas

**vikas251074** · Aug 12 '08, 11:24 AM

I have studied some DOM element but not able to use it.

**RamananKalirajan** · Aug 12 '08, 11:28 AM

I am sorry Vikas. Just go through this code if it is useful then no problem otherwise I can give u some other idea

[HTML]<html>
<head>
<script type="text/javascript">
function doThis()
{
var oDiv = document.getEle mentById('myDiv ');
var el = document.create Element('input' );
el.type="text";
var sel = document.getEle mentById('mySel ect1').selected Index;
// alert(sel);
if(sel==0)
el.value="I Selected Aplled";
else if(sel==1)
el.value="You selected an Orange";
else if(sel==2)
el.value="You selected an Mango";
else if(sel==3)
el.value="You selected an Grape";
else
el.value="You selected an Pine";

oDiv.appendChil d(el);
oDiv.innerHTML= oDiv.innerHTML;
}
</script>
</head>
<table>
<tr>
<td>
<select id="mySelect1" size="10" onclick="doThis ()">
<option>Apple </option>
<option>Orang e</option>
<option>Mango </option>
<option>Grape </option>
<option>Pine</option>
</select>
</td>
<td>
<div id="myDiv">
</div>
</td>
</tr>
</table>
</html>[/HTML]

Once again I am sorry. Pls let me know you are satisfied with this otherwise I am having an another Idea. If u want i can give u that.

Regards
Ramanan Kalirajan

**acoder** · Aug 12 '08, 11:35 AM

Just a note that this:
[code=javascript]var sel = document.getEle mentById('mySel ect1').selected Index;
// alert(sel);
if(sel==0)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Apple";
else if(sel==1)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Orange";
else if(sel==2)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Mango";
else if(sel==3)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Grape";
else
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Pine";
[/code] can be replaced by [code=javascript]var selObj = document.getEle mentById('mySel ect1');
var val = selObj.options[selObj.selected Index].text;
document.getEle mentById('myDiv ').innerHTML="Y ou selected " + val;[/code]or if you set the values of the options:
[code=javascript]var val = document.getEle mentById('mySel ect1').value;
document.getEle mentById('myDiv ').innerHTML="Y ou selected " + val;[/code]

**RamananKalirajan** · Aug 12 '08, 11:42 AM

Originally posted by acoder

Just a note that this:
[code=javascript]var sel = document.getEle mentById('mySel ect1').selected Index;
// alert(sel);
if(sel==0)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Apple";
else if(sel==1)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Orange";
else if(sel==2)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Mango";
else if(sel==3)
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Grape";
else
document.getEle mentById('myDiv ').innerHTML="Y ou selected an Pine";
[/code] can be replaced by [code=javascript]var selObj = document.getEle mentById('mySel ect1');
var val = selObj.options[selObj.selected Index].text;
document.getEle mentById('myDiv ').innerHTML="Y ou selected " + val;[/code]or if you set the values of the options:
[code=javascript]var val = document.getEle mentById('mySel ect1').value;
document.getEle mentById('myDiv ').innerHTML="Y ou selected " + val;[/code]

Hi Mr. Acoder, I suggested hime this way first, but his requirement he want that text to be displayed in an Input Text box which should be dynamically created. That's why I have done like this.

Regards
Ramanan Kalirajan

**acoder** · Aug 12 '08, 11:51 AM

OK, your altered code could still be made more efficient. This:
[code=javascript]var sel = document.getEle mentById('mySel ect1').selected Index;
if(sel==0)
el.value="I Selected Aplled";
else if(sel==1)
el.value="You selected an Orange";
else if(sel==2)
el.value="You selected an Mango";
else if(sel==3)
el.value="You selected an Grape";
else
el.value="You selected an Pine";
[/code]could be changed to:[code=javascript]var selObj = document.getEle mentById("mySel ect1");
var val = selObj.options[selObj.selected Index].text;
el.value = val;[/code]Not only is the code shorter, if you add another option, you don't have to make any changes.

**RamananKalirajan** · Aug 12 '08, 11:53 AM

Originally posted by acoder

OK, your altered code could still be made more efficient. This:
[code=javascript]var sel = document.getEle mentById('mySel ect1').selected Index;
if(sel==0)
el.value="I Selected Aplled";
else if(sel==1)
el.value="You selected an Orange";
else if(sel==2)
el.value="You selected an Mango";
else if(sel==3)
el.value="You selected an Grape";
else
el.value="You selected an Pine";
[/code]could be changed to:[code=javascript]var selObj = document.getEle mentById("mySel ect1");
var val = selObj.options[selObj.selected Index].text;
el.value = val;[/code]Not only is the code shorter, if you add another option, you don't have to make any changes.

Thank You for the suggestion, Mr. Acoder I will improve myself.

Regards
Ramanan Kalirajan

List item based display of input text

List item based display of input text

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment