6

例如，我有一个代码：

<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex=='other'){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

I need the textbox to appear when option "other" is selected. 上面的代码不起作用:(

4

8 回答 8

15

selectedIndex给出一个索引，即一个数字，所以“其他”的索引是 8，你可以从 select 元素的 value 属性中获取所选选项的值。要访问表单，控件正在使用元素表单属性this.form，您的表格单元格也应该在一行中。

<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
于 2012-08-28T12:02:34.520 回答
4 
    <form name="myform">
       <table>
         <td>
           <select name="one" onchange="if (this.options[this.selectedIndex].value =='other'){document.myform['other'].style.visibility='visible'}else {document.myform['other'].style.visibility='hidden'};">
             <option value="" selected="selected">Select...</option>
             <option value="1">1</option>
             <option value="2">3</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="other">Other</option>
          </select>
         <input type="textbox" name="other" style="visibility:hidden;"/>
       </td>
    </table>
 </form>​
于 2012-08-28T12:03:21.873 回答
4 
<form name="myform">
<table>
<td>
<select name="one" id="mySelect">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

<script type="text/javascript">
$('#mySelect').bind('onchange',function(){
if (this.value==='other')
{
this.myform['other'].style.visibility='visible'
}
else {
this.myform['other'].style.visibility='hidden'};
}
</script>
于 2012-08-28T12:07:00.937 回答
1 
$(document).ready(function () {
        $('#types').change(function () {
            if ($('#types').val() == 'Other') {
                $('#other').show();
            }
            else {
                $('#other').hide();
            }
        });
    });



<body>
<form id="form1" runat="server">
    <div>

   <select id="types" name="types">
            <option value="Type 1">Type 1</option>
            <option value="Type 2">Type 2</option>
            <option value="Type 3">Type 3</option>
            <option value="Other">Other</option>
        </select>

        <input type="text" id="other" name="other" style="display: none;" />
    </div>
</form>

于 2016-04-13T07:26:24.887 回答
0

this.selectedIndex返回一个整数而不是字符串。类似 0,1,2 的东西，对于“其他人”来说可能是 8。8 == 'other'永远不可能是真的

试试这个

onchange="if (this.options[this.selectedIndex].value =='other')"
于 2012-08-28T12:04:07.030 回答
0

首先将您的内容包含td在 a 中tr，然后下面是 DEMO

http://jsfiddle.net/3Snmh/5/

于 2012-08-28T12:09:44.900 回答
0 
<form name="form" action="" method="post">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='yes'){this.form['yes'].style.visibility='visible'}else {this.form['yes'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="text" name="yes" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
于 2015-12-23T12:42:36.260 回答
0

jQuery

$(document).ready(function() {
        $("select").change(function() {
            $(this).find("option:selected").each(function() {
                if ($(this).attr("value") == "class") {
                    $(".box").not(".class_name").hide();
                    $(".class_name").show();
                    $(".box").not(".class_name").val("");
                } 

                else if ($(this).attr("value") == "ref") {
                    $(".box").not(".ref_id").hide();
                    $(".ref_id").show();
                    $(".box").not(".ref_id").val("");
                }

                else {
                    $(".box").hide();
                }
            });
        }).change();
    });

HTML

<div>
            <select>
                <option>Choose</option>
                <option value="class">Class</option>
                <option value="ref">Particular</option>
            </select>
        </div>
        <div class="class_name box">
            Class Name: <input type="text" name="c">
        </div>
        <div class="ref_id box">
            Reference_id : <input type="text" name="r">
        </div>
于 2016-08-18T09:41:35.287 回答