drop down option

Discussion in 'HTML & Website Design' started by mike4uuu, Jan 20, 2010.

  1. #1
    i want to insert a drop down option in my form ... like the one below
    <select>
    <option>Milk</option>
    <option>Coffee</option>
    <option>Tea</option>
    </select>


    if the user select cofee , i want to display cofee as text somewhere in the form

    how do i do this ...
    can i insert a drop down opton within <textarea> drop down option </text area>???
    Can somebody help me out !!! (language , css/php/javascript or html )

    Thanks in advance !
     
    Last edited: Jan 20, 2010
    mike4uuu, Jan 20, 2010 IP
  2. sp2h

    sp2h Peon

    Messages:
    189
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #2
    <select>
    <option>Milk</option>
    <option>Coffee</option>
    <option>Tea</option>
    </select>


    First You Assign The id in your selection dropdown box.

    <select id="customselect">
    <option>Milk</option>
    <option>Coffee</option>
    <option>Tea</option>
    </select>


    var dropdownIndex = document.getElementById('customselect').selectedIndex;
    var dropdownValue = document.getElementById('customselect')[dropdownIndex].value;
    document.write(dropdownValue);


    Let me know Is useful for you? Get Dropdown Selection value using javascript

    Regards
    SP2h COM
     
    sp2h, Jan 20, 2010 IP
  3. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks buddyy for ur kind help... but i m not able to make it ...
    m a novice in this css /scripts / etc etc

    what i was planning to do is .. when somebody select an option ... lets say cofee

    i want the same to display in a textbox


    <select id="customselect">
    <option>Milk</option>
    <option>Coffee</option>
    <option>Tea</option>
    </select>

    <textarea name="description" id="description" rows="5" cols="430" style="width:560px; >

    "i want the selected option to display here " </textarea>

    Thanks again for ur help!
     
    mike4uuu, Jan 20, 2010 IP
  4. sp2h

    sp2h Peon

    Messages:
    189
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #4
    <script>
    function changeValue(){
    var dropdownIndex = document.getElementById('customselect').selectedIndex;
    var dropdownValue = document.getElementById('customselect')[dropdownIndex].value;
    document.getElementById('description').value = dropdownValue;
    }

    </script>
    <select id="customselect" onchange="javascript:changeValue();">
    <option>Select</option>
    <option>Milk</option>
    <option>Coffee</option>
    <option>Tea</option>
    </select>

    <textarea name="description" id="description" rows="5" cols="430" style="width:560px;"></textarea>


    Paste this code in your body area... i hope this will be work for you...

    From PSD to Html Converter

    Regards,
    SP2H COM Team
     
    sp2h, Jan 20, 2010 IP
  5. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #5
    the drop down box and the text area is displaying but when i select tea or cofee ... its not displaying inside the text area ,,,,
     
    mike4uuu, Jan 20, 2010 IP
  6. blacksheep666

    blacksheep666 Active Member

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #6
    
    <select id="category" name="category" onchange="display()">
    		<option selected="selected">Milk</option>
    		<option>Coffee</option>
    		<option>Tea</option>
    	</select>
    	<br />
    	<textarea id="result" name="result">Milk</textarea>
    	
    	<script language="javascript">
    		function display ()
    		{
    			document.getElementById("result").value = document.getElementById("category").value;
    		}
    	</script>
    
    HTML:

    Try this one
     
    blacksheep666, Jan 20, 2010 IP
  7. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #7
    nothing works ,,,,,,,
     
    mike4uuu, Jan 20, 2010 IP
  8. blacksheep666

    blacksheep666 Active Member

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #8
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Try this</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    </head>
    	
    <body>
    	<select id="category" name="category">
            <option selected="selected">Milk</option>
            <option>Coffee</option>
            <option>Tea</option>
        </select>
    	<br />
    	<textarea id="result" name="result">Milk</textarea>
    	
    	<script language="javascript">
    		$("#category").change(function(event){
    			$("#result").val($(this).val());
    		});	
    	</script>
    	
    </body>
    </html>
    
    
    HTML:
    if that does not work then try this one.
     
    blacksheep666, Jan 21, 2010 IP
  9. biscayne

    biscayne Peon

    Messages:
    162
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Hi Friends!

    It's a really a good work!!
    I'm a new in HTML language, so it's really help me... I will use this code...

    Thanks again.
     
    biscayne, Jan 21, 2010 IP
  10. blacksheep666

    blacksheep666 Active Member

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #10
    which one is better? the first or second one?
     
    blacksheep666, Jan 21, 2010 IP
  11. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #11
    thanks guys.... its working but only in firefox !
     
    mike4uuu, Jan 21, 2010 IP
  12. 1945

    1945 Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    hehe...nice code i will try..:D
     
    1945, Jan 22, 2010 IP
  13. Kevin@twillooo.com

    Kevin@twillooo.com Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    explorer is dieing anyways although google chrome has been giving me loading problems even when im going to gmail its annoying as hell
     
    Kevin@twillooo.com, Jan 22, 2010 IP
  14. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #14
    Both the code works perfect in firefox but doesnt work in I.E ... any reasons .. its asking for actice x control security ... even if alllowed , it stills not working ...

    Can somebody suggest me a good one which wont ask for active x control security also /// thanks a ton in advance
     
    mike4uuu, Jan 24, 2010 IP
  15. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #15
    Also, is there any option to disble the text area until and unless some option is choosen ... from the drop down menu ./...
     
    mike4uuu, Jan 24, 2010 IP
  16. blacksheep666

    blacksheep666 Active Member

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #16
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Try this</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    </head>
       
    <body>
        <select id="category" name="category">
    		
            <option value="">Please Select</option>
            <option value="Milk">Milk</option>
            <option value="Coffee">Coffee</option>
            <option value="Tea">Tea</option>
        </select>
        <br />
        <textarea id="result" name="result"></textarea>
       
        <script language="javascript">
            $("#category").change(function(event){
                $("#result").val($(this).val());
            });
        </script>
       
    </body>
    </html>
    
    
    HTML:
     
    blacksheep666, Jan 24, 2010 IP
  17. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #17
    this is simple but not working in IE , can somebody help me out ...
    Also, is there any way to disable the text area until and unless an option is choosen from the drop down menu ... thanks
     
    mike4uuu, Jan 24, 2010 IP
  18. mike4uuu

    mike4uuu Active Member

    Messages:
    832
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #18
    can somebosy help me out why the above code is not working in IE , but it works in firefox ! is there any way i can do this using css and php .. if so how ... can somebody help me ...
    Thanks in advance !
     
    mike4uuu, Jan 25, 2010 IP