Ausblenden von Textfeldern basierend auf mehreren Auswahlmenüs

Ich versuche, Textfelder auszublenden, die von einer bestimmten Kombination ausgewählter Werte in zwei ausgewählten Menüs abhängen.Ausblenden von Textfeldern basierend auf mehreren Auswahlmenüs

Ich kann nicht scheinen, um das XPath-Textfeld zu bekommen zu offenbaren IF Source = "XML-Antwortkörper" und Assertion Type = "XML-Pfad Spiel"

Hier ist mein Code:

<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>

Quelle

2016-11-28 fambo

try '$ (this) .val()' statt 'this.value' –

Versuchen Sie, diese Geige, basierend auf Ihren Code,

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>

Quelle

2016-11-28 13:15:38 ScanQR

Danke TechBreak! Ich kann sehen, dass das perfekt funktioniert, aber wenn ich den aktualisierten Code auf meinen lokalen Computer kopiere und in Chrome und Firefox teste, funktioniert das nicht. Auch das zweite Menü filtert nicht mehr. Was mache ich falsch? – fambo

@fambo was ist der Fehler, den Sie sehen. Fügen Sie den Screenshot an. Nichts außergewöhnliches im Code getan, fügte ich hinzu. Sollte normal funktionieren. – ScanQR

@fambo versuchen aktualisierte Antwort. In Geige importieren wir keine Skripte, damit es intern funktioniert. Ich habe Code hinzugefügt, der in Ihrer Umgebung funktioniert. Es wurde Jquery-Skript importiert. Ich hoffe, es wird funktionieren und Sie akzeptieren meine Antwort und Upvote :) – ScanQR

Ausblenden von Textfeldern basierend auf mehreren Auswahlmenüs

Antwort

Verwandte Themen