Question

我有一个使用语义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");
});

此操作成功隐藏了条件类，但是即使选择“独立”作为选项，该类也不会显示。此代码有什么问题？非常感谢！

Answer 1

我找到了解决方法。

像这样稍微修改“付款方式”下拉字段：

            <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");
    });

它就像一种魅力！

jQuery和语义UI的条件字段

1 个答案: