複数の選択メニューに基づいてテキストフィールドを表示しないようにする

2つの選択メニューから選択された選択値の特定の組み合わせに応じて、テキストフィールドを隠すことを試みています。複数の選択メニューに基づいてテキストフィールドを表示しないようにする

ここでソース=「XMLレスポンスボディ」とアサーションタイプ=「XMLパスの一致」

が私のコードである場合、私は、XPathテキストフィールドが明らかにし得るように見えるカント：

<body> 
    <div class="container"> 
    <form> 
     <div class="clearfix"> 
      <label for="program">Source</label> 
      <select id="trigger" name="program" class="x-large"> 
       <option value="">(select)</option> 
       <option value="1">RAW Response</option> 
       <option value="2">XML response body</option> 
      </select> 
     </div> 
     <div class="clearfix"> 
      <label for="issuer">Assertion Type</label> 
      <select id="issuer" class="xlarge switchable" name="issuer"> 
       <option value="containsString" class="issuer_1">Contains string</option> 
       <option value="httpsStatusCode" class="issuer_1">HTTP status code</option> 
       <option value="containsString" class="issuer_2">Contains string</option> 
       <option value="xpathResponse" class="issuer_2">XML path match</option> 
      </select> 
     </div> 


      <div id='assertionDescription'>Assertion Description<br/>&nbsp; 
      <br/>&nbsp; 
       <input type='text' class='text' name='assertionDescription' value size='20' /> 
       <br/> 
      </div> 
      <div id='expectedResult'>Expected Result<br/>&nbsp; 
      <br/>&nbsp; 
       <input type='text' class='text' name='expectedResult' size='20' /> 
      <br/> 
      </div> 
      <div style='display:none;' id='xpath'>Xpath<br/>&nbsp; 
      <br/>&nbsp; 
       <input type='text' class='text' name='xpath' size='20' /> 
      <br/> 
      </div> 
      <div style='display:none;' id='jsonPath'>JSON Path<br/>&nbsp; 
      <br/>&nbsp; 
       <input type='text' class='text' name='jsonPath' size='20' /> 
      <br/> 
      </div> 
    </form> 
    </div> 

</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

<script> 
var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
$j("#trigger").change(function() { 
    if ($j(this).data('options') == undefined) { 
     $j(this).data('options', $j('select.switchable option').clone()); 
    } 
    var id = $j(this).val(); 
    var that = this; 
    $j("select.switchable").each(function() { 
     var thisname = $j(this).attr('name'); 
     var theseoptions = $j(that).data('options').filter('.' + thisname + '_' + id); 
     $j(this).html(theseoptions); 
    }); 
}); 
//then fire it off once to display the correct elements 
$j('#trigger').trigger('change'); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
$('#issuer').on('change', function() { 
    if (this.value == 'xpathResponse') 
    //.....................^....... 
    { 
    $("#xpath").show(); 

    } 

    else 
    { 
    $("#xpath").hide(); 


    } 
}); 
}); 
</script>

出典

2016-11-28 fambo

試し '$（この）.val（）'の代わりに、 'this.value' –

はこれを試してみてくださいフィドル、あなたのコードに基づいて

https://jsfiddle.net/2u38koq8/1/

<body> 
     <div class="container"> 
     <form> 
      <div class="clearfix"> 
      <label for="program">Source</label> 
      <select id="trigger" name="program" class="x-large"> 
       <option value="">(select)</option> 
       <option value="1">RAW Response</option> 
       <option value="2">XML response body</option> 
      </select> 
      </div> 
      <div class="clearfix"> 
      <label for="issuer">Assertion Type</label> 
      <select id="issuer" class="xlarge switchable" name="issuer"> 
       <option value="containsString" class="issuer_1">Contains string</option> 
       <option value="httpsStatusCode" class="issuer_1">HTTP status code</option> 
       <option value="containsString" class="issuer_2">Contains string</option> 
       <option value="xpathResponse" class="issuer_2">XML path match</option> 
      </select> 
      </div> 


      <div id='assertionDescription'>Assertion Description 
      <br/>&nbsp; 
      <br/>&nbsp; 
      <input type='text' class='text' name='assertionDescription' value size='20' /> 
      <br/> 
      </div> 
      <div id='expectedResult'>Expected Result 
      <br/>&nbsp; 
      <br/>&nbsp; 
      <input type='text' class='text' name='expectedResult' size='20' /> 
      <br/> 
      </div> 
      <div style='display:none;' id='xpath'>Xpath 
      <br/>&nbsp; 
      <br/>&nbsp; 
      <input type='text' class='text' name='xpath' size='20' /> 
      <br/> 
      </div> 
      <div style='display:none;' id='jsonPath'>JSON Path 
      <br/>&nbsp; 
      <br/>&nbsp; 
      <input type='text' class='text' name='jsonPath' size='20' /> 
      <br/> 
      </div> 
     </form> 
     </div> 
    </body> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
     <script> 
     $(document).ready(function() { 
      $(document).on('change', 'select#issuer', function() { 
      if ($(this).val() == 'xpathResponse') 
      //.....................^....... 
      { 

       $("#xpath").show(); 

      } else { 
       $("#xpath").hide(); 
      } 
      }); 

      $("select#trigger").change(function() { 

      if ($(this).data('options') == undefined) { 
       $(this).data('options', $('select.switchable option').clone()); 
      } 
      var id = $(this).val(); 
      var _this = this; 
      $("select.switchable").each(function() { 
       var thisname = $(this).attr('name'); 
       var theseoptions = $(_this).data('options').filter('.' + thisname + '_' + id); 

       $(this).html(theseoptions); 
      }); 
      }); 
      //then fire it off once to display the correct elements 
      $('select#trigger').trigger('change'); 
     }); 

     </script>

出典

2016-11-28 13:15:38 ScanQR

ありがとうTechBreak！私はそれが完全にフィドルで働いているのを見ることができますが、あなたの更新されたコードを私のローカルマシンにコピーし、ChromeとFirefoxでテストするとうまくいきません。また、2番目のメニューはもはやフィルタリングされません。私は間違って何をしていますか？ – fambo

@famboあなたが見ているエラーは何ですか？スクリーンショットを添付してください。例外的なコードは何も追加されていません。正常に動作するはずです。 – ScanQR

@fambo更新された回答を試してください。バイブルではスクリプトをインポートしないので、内部的に動作します。私はあなたの環境で動作するコードを追加しました。 jqueryスクリプトをインポートする必要があります。私はそれが動作し、あなたが私の答えとupvoteを受け入れることを願っ:) – ScanQR

複数の選択メニューに基づいてテキストフィールドを表示しないようにする

答えて

関連する問題