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>

オプション「その他」が選択されたときにテキストボックスを表示する必要があります。上記のコードは機能していません:(

4

8 に答える 8

15

selectedIndexインデックス、つまり数値を与えるので、「その他」のインデックスは8です。選択したオプションの値は、select要素のvalueプロパティから取得できます。フォームにアクセスするには、コントロールが要素フォームプロパティを使用していますthis.form。また、テーブルセルも1行になっている必要があります。

<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 に答える
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/3Snmph/5/

于 2012-08-28T12:09:44.900 に答える
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 に答える