ansaurus

Question

Click items in select box, and then display a text input

Answer 1

+3 A:

You can do this with jQuery. E.g:

$('select[name=interest] option[value=other]').click(function() {
    $('input[name=other_interest]').show();   
})

HTML:

<select multiple size="5" name="interest">
    <!-- ... -->
    <option value="other">other</option>
</select>
<input type="text" name="other_interest" style="display:none" />

If you give an ID to each element you want to operate on, it is even easier to write.

Felix Kling 2010-02-16 11:54:35

@Felix, Thanks, it works. And for completing this, i want it to disappear after i click back to the other items.

garcon1986 2010-02-17 10:55:57

@garcon1986 You can hide the element with `$('input[name=other_interest]').hide();` Have a look at the documentation: http://api.jquery.com/

Felix Kling 2010-02-17 20:26:50

Answer 2

+1 A:

Quick and dirty (but that's the basic idea):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#other{
    display: none;
}
--></style>
<script type="text/javascript"><!--
function checkOther(select){
    if( select[select.selectedIndex].value=="other" ){
        document.getElementById("other").style.display = "inline";
    }else{
        document.getElementById("other").style.display = "none";
    }
}
//--></script>
</head>
<body>

<select multiple size="5" name="interest" onchange="checkOther(this)">
 <optgroup label="Sports">
  <option value="">Footaball</option>
  <option value="">Basketball</option>
  <option value="">Volleyball</option>
 </optgroup>
 <optgroup label="Music">
  <option value="">Folk Musique</option>
  <option value="">Pop Musique</option>
  <option value="">Rock Musique</option>
 </optgroup>
 <optgroup label="Pets">
  <option value="">Dogs</option>
  <option value="">Cats</option>
  <option value="">Rabbits</option>
 </optgroup>
 <option value="other">other</option>
</select>
<input id="other"type="text" name="other_interest" />


</body>
</html>

Álvaro G. Vicario 2010-02-16 12:03:25

@thanks Alvaro, it's working perfectly.

garcon1986 2010-02-17 10:57:21

ansaurus

tags:

views:

answers:

Click items in select box, and then display a text input

related questions