Question

您好我根据选择输入显示不同的序列导航。这是我到目前为止要做的事情的例子：

                               <ul class="steps" id="dbleOpt">
<li class="active">Create<span class="chevron"></span></li>
                                <li>Fields<span class="chevron"></span></li>
                            </ul>
                        <ul class="steps" id="singleOpt">
  <li class="active">Create<span class="chevron"></span></li>
 <li>Welcome<span class="chevron"></span></li>
                            <li>Overview<span class="chevron"></span></li>
                        </ul>

这是我的javascript无效：

 $(function () {
        $('#singleOpt').hide();
        $('#dbleOpt').show();

        $('#Lists_opt_in').on("change",function () {
            $('#dbleOpt').hide();
            $('#singleOpt'+$(this).val()).show();
        })
    });

这里是选择输入....

<select id="Lists_opt_in" name="Lists[opt_in]" class="form-control has-help-text">
<option value="double" selected>Double opt-in</option>
<option value="single">Single opt-in</option>
</select>

Answer 1

在选项标记中使用一些data属性，如下面的代码段
然后找到尊重data的{{1}}属性以显示

id

$(function() {
  $('#singleOpt').hide();
  $('#dbleOpt').show();

  $('#Lists_opt_in').on("change", function() {
    $('.steps').hide();
    $('#'+$('option:selected', this).data('target')).show()
  })
});

Answer 2

为简单起见，只需尝试单个列表，然后使用jQuery的toggle()方法切换可见性：

＆＃13;

$(function () {
  $('#Lists_opt_in').on("change",function () {
     $('.dbleOpt').toggle();
     $('.singleOpt').toggle();
 })
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <ul class="steps" id="dbleOpt">
      <li class="active">Create<span class="chevron"></span></li>
      <li class="dbleOpt">Fields<span class="chevron"></span></li>
      <li class="singleOpt hidden">Welcome<span class="chevron"></span></li>
      <li class="singleOpt hidden">Overview<span class="chevron"></span></li>
    </ul>
    <select id="Lists_opt_in" name="Lists[opt_in]" class="form-control has-help-text">
      <option value="double" selected>Double opt-in</option>
      <option value="single">Single opt-in</option>
    </select>

＆＃13;

需要帮助show（）hide（）底部序列导航取决于选择输入

2 个答案: