Щелкните элементы в поле выбора, а затем отобразите ввод текста

Теперь у меня есть поле выбора.

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

Как я могу это сделать?

Большое спасибо.


javascript php
person SUN Jiangong    schedule 16.02.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете сделать это с помощью jQuery. Например:

$('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" />

Если вы дадите идентификатор каждому элементу, с которым хотите работать, его будет еще проще написать.

person Felix Kling    schedule 16.02.2010
comment
@ Феликс, спасибо, все работает. И для завершения этого я хочу, чтобы он исчез после того, как я вернусь к другим элементам. - person SUN Jiangong; 17.02.2010
comment
@garcon1986 Вы можете скрыть элемент с помощью $('input[name=other_interest]').hide(); Посмотрите документацию: api.jquery.com - person Felix Kling; 17.02.2010

arrow_upward
1
arrow_downward

Быстро и грязно (но это основная идея):

<!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>
person Álvaro González    schedule 16.02.2010

arrow_upward
0
arrow_downward

Подход в стиле 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>
person weirdFactory    schedule 13.07.2011