1

我有一个用语义 UI 构建的表单，我需要有条件地显示一些字段，以防进行指定的选择。

这是html代码：

        <div class="field">
          <label>Pay Mode</label>
          <div class="ui selection dropdown" id="paymode">
            <input type='hidden' name='pay_mode'>
            <i class="dropdown icon"></i>
            <div class="default text">Pay Mode</div>
            <div class="menu">
                <div class="item" data-value="free">Free</div>
                <div class="item" data-value="stand alone">Stand alone</div>
                <div class="item" data-value="central system">Central System</div>
            </div>
          </div>
        </div>
        <div class="conditional">
          <div class='three fields'>
            <div class='field'>
              <label>A1</label>
              <input
                type='text'
                name='a1'
                value=''
                required
              />
            </div>
            <div class='field'>
              <label>A2</label>
              <input
                type='text'
                name='a2'
                value=''
                required
              />
           ...

所以基本上，条件是支付模式。只有在付费模式下选择了“独立”时，才会显示“有条件”类。

这是我的js文件：

$('.conditional').hide();
$('#paymode').change(function () {
   var selected = $('#paymode item:selected').text();
   $('.conditional').toggle(selected == "Stand alone");
});

这个成功隐藏了条件类，但是即使选择了 Standalone 作为选项，相同的类也不会显示出来。这段代码有什么问题？非常感谢！

4

1 回答 1

0

我找到了解决方案。

稍微修改支付模式下拉字段，如下所示：

            <div class="field">
              <label>Pay Mode</label>
              <select name="pay_mode" class="ui fluid dropdown" id="condition">
                  <option value="">Pay Mode</option>
                  <option value="free">Free</option>
                  <option value="stand alone">Stand alone</option>
                  <option value="central system">Central System</option>
                </select>
            </div>

js文件是这样的：

    $('.conditional').hide();

    $('#condition').change(function () {
      var selected = $('#condition option:selected').text();
      $('.conditional').toggle(selected == "Stand alone");
    });

它就像一个魅力！

于 2018-08-26T16:27:53.253 回答