2016-11-20 8 views
0

ドロップダウンリストから入力を受け取り、ユーザーが選択した内容に応じてさまざまな入力を表示/非表示にします。ブール値でトグルを使用しようとしましたが、応答がありません。toggle jquery booleanを使用して入力を表示しない

私の予想私はトグルするにはtrueを送信し、それは入力を表示するか、すでに表示されている場合はそのままにします。私が偽を送るならそれは隠れ、それが隠されていればそれはそのままです。

「Parent」と「Child」の両方が最初の値をtrueにしています。子から親に切り替えると(サイトが読み込まれるとファーストネームが表示されます)、非表示になります。それはそれが示す偽です。

$(document).ready(function() { 
     var user = $("[id*=userTypeDD]").val(); 
     $("[id*=userTypeDD]").on("change", function() { 
      user = $("[id*=userTypeDD]").val(); 
      hideInputFields(user); 
     }); 
    }); 

    function hideUserInputFields(user) { 
     if (user == "Child") { 
      hideInputFields(true, true, false, false, false); 
     } 
     if (user == "Parent") { 
      hideInputFields(true, true, true, true, true); 
     } 
     if (user == "Administrator") { 
      hideInputFields(false, false, false, false, false); 
     } 
    } 

    function hideInputFields(firstNameIsVisible, surnameIsVisible, postcodeIsVisible, telephoneIsVisible, emailIsVisible) 
    { 
     $("[id*=firstNameTxt]").closest("tr").toggle(firstNameIsVisible); 

    } 

マークアップ(ASP.NET)が

<asp:DropDownList ID="userTypeDD" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> 
    <asp:ListItem>Child</asp:ListItem> 
    <asp:ListItem>Parent</asp:ListItem> 
    <asp:ListItem>Administrator</asp:ListItem> 
</asp:DropDownList> 
    </td> 
    <td>&nbsp;</td> 
</tr> 
<tr> 
    <td class="text-right" style="width: 574px"> 
<asp:Label ID="firstNameLabel" runat="server" Text="First name: "></asp:Label> 
    </td> 
</tr> 
</table> 

編集:それは単に私が渡すブール値は

+0

あなたはあなたのマークアップを追加できます – Geeky

+0

'$(" [id * = firstNameTxt] ")。closest(" tr ")'部分はあなたが望む要素を返し、 'firstNameIsVisible'はあなたがそれが実行される時間。あなたのコードは動作しているはずです(少なくとも底部は正しいです)。 – casraf

+0

@Geekyマークアップを追加しました。それは適切な要素を返します。 – Higeath

答えて

0

あなたを切り替えるには関係なく、TR毎回を切り替えないように私には思えますあなたのドロップダウンの変更イベントで間違った関数を呼び出しています。それはそう同様に、あなたの関数に名前を付けていないのがベストだ理由です

$("[id*=userTypeDD]").on("change", function() { 
     user = $("[id*=userTypeDD]").val(); 
     hideInputFields(user); 
    }); 

$("[id*=userTypeDD]").on("change", function() { 
     user = $("[id*=userTypeDD]").val(); 
     hideUserInputFields(user); 
    }); 

へ...これを変更します。 hideUserInputFieldsはそれを行う機能ではないので、誤解を招く名前です。あなたはそれを handleUserSelectionChangeと呼ぶほうがよいでしょう。それで、あなたはおそらくこのミスを犯さなかったでしょう。あなたの他の関数名は理にかなっています。

+0

ありがとうございました。 – Higeath

+0

Heh、あなたが気づいてうれしい。私はあなたがそのコメントを追加したときにそれを追加する質問を編集していました。 – TheValyreanGroup

関連する問題