Question

现在我有一个选择框。

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

我该怎么做？

非常感谢。

Answer 1

您可以使用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，则更容易编写。

Answer 2

快速而肮脏（但这是基本想法）：

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

Answer 3

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>

单击选择框中的项目，然后显示文本输入

3 个答案: