隱藏基於多個選擇菜單的顯示文本字段

我試圖根據從兩個選擇菜單中選擇的值的特定組合顯示隱藏文本字段。隱藏基於多個選擇菜單的顯示文本字段

我不能似乎得到了XPath的文本字段透露如果source =「XML響應體」，並斷言類型=「XML路徑匹配」

這裏是我的代碼：

<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中測試時，它不起作用。另外，第二個菜單不再過濾。我究竟做錯了什麼？ – fambo

@fambo你看到的錯誤是什麼。附上屏幕截圖。我加入的代碼沒有特殊的做法。應該正常工作。 – ScanQR

@fambo嘗試更新答案。在小提琴中我們不會導入腳本，所以它在內部工作。我添加了可在您的環境中工作的代碼。它需要導入jquery腳本。我希望它會起作用，你接受我的回答，並讚揚:) – ScanQR

隱藏基於多個選擇菜單的顯示文本字段

回答

相關問題