CODEWITHSUNDEEP
phpjavascript
SUN Jiangong
SUN Jiangong

Reputation: 5312

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

Now i have a select box. 

<select multiple size="5" name="interest">
 <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>

I want to click "other", and then displays a text field

<input type="text" name="other_interest" />

How can i make it?

Thanks very much.

Upvotes: 1

Views: 7353

Answers (3)

weirdFactory
weirdFactory

Reputation: 581

DOM-style approach (Click other in select box, and then add a text input)

<html>
<head>
<style type="text/css">
input {
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #EDF2F7;
}

option {
 color: white;
 background-color: blue;
}    
</style>
<script>
function createInputText(){
    var select = document.getElementById('mySelect');
    var chosenOption = select.options[select.selectedIndex];
    if (chosenOption.value == "other") {
        var addInputText = document.createElement('input');
        addInputText.type='text';
        addInputText.name='other_interest';
        myform.appendChild(addInputText);
    }
}
</script>
</head>
<body>
<form id=myform>
<select id=mySelect multiple size="5" name="interest" onchange="createInputText()">
 <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>
</from>
</body>
</html>

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816840

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.

Upvotes: 3

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146578

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">
<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>

Upvotes: 1

Related Questions