Question

我试图根据从两个选择菜单中选择的选择值的特定组合来显示隐藏文本字段。

我似乎无法获取xpath文本字段以显示IF Source =＆＃34; XML Response body＆＃34;和断言类型=＆＃34; XML路径匹配＆＃34;

这是我的代码：

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

Answer 1

根据您的代码尝试这个小提琴，

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>

隐藏基于多个选择菜单的显示文本字段

1 个答案: