單擊選擇框中的項目，然後顯示文本輸入

現在我有一個選擇框。單擊選擇框中的項目，然後顯示文本輸入

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

我想點擊「其他」，然後顯示一個文本字段

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

我如何能做到嗎？

非常感謝。

來源

2010-02-16 Alex SUN

你可以用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" />

如果你給一個ID爲您想要操作的每個元素，甚至更容易編寫。

來源

2010-02-16 11:54:35

@Felix ，謝謝，它的工作原理。而爲了完成這一點，我希望它消失後，我點擊回到其他項目。 – 2010-02-17 10:55:57

@ garcon1986你可以用'$（'input [name = other_interest]'）隱藏元素。hide（）;'查看文檔：http://api.jquery.com/ – 2010-02-17 20:26:50

快速和骯髒的（但是這是基本的想法）：

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

來源

2010-02-16 12:03:25

@thanks Alvaro，它是完美地工作。 – 2010-02-17 10:57:21

DOM樣式的方法（點擊其他的選擇框，然後添加文本輸入）

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

來源

2011-07-13 15:36:39 weirdFactory

單擊選擇框中的項目，然後顯示文本輸入

回答

相關問題