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.
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.
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>
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>
加载中,请稍侯......
精彩评论