Question

我试图展示＆＃34; ul＆＃34;当选择从下拉列表中选择是时。单击它时工作正常。但我想在页面加载时如果选项“是”＆＃39;已选择或隐藏选项＆＃39;否＆＃39;已被选中。

＆＃13;

    $(document).ready(function(){
        $('#Limit').on('change', function() {
          if ( this.value == 'true')
          {
            $("#first-piller").show();
          }
          else
          {
            $("#first-piller").hide();
          }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Limit">
        <option value="true" selected>Yes</option>
        <option value="false">No</option>
        </select>
        
         <!-- Show hide depending selection -->

        <ul id="first-piller">
        <li>
        <div class="left col-sm-6  col-xs-6 text-left left-indent" id="overview" >
        <p><b>First Piller</b></p>
        </div>
        <div class="right col-sm-6  col-xs-6" class="pillers">
        <select><option value="1">4 or more</option>
            <option value="2" >0 - 3 </option>
            <option value="3" >0 or more</option>
        </select>
        </div>
        </li>
        </ul>

＆＃13;

任何人都可以帮我吗？提前谢谢。

Answer 1

当你的DOM准备就绪，并且绑定了change事件后，你可以手动触发它：

$(document).ready(function() {
  // your rest of the code

  $('#Limit').change();
});

这将触发更改事件，该事件最终将执行事件处理程序的代码。

Answer 2

创建一个函数并在两种情况下调用它

function FirstPiller(sender)
{
if ( sender.val() == 'true')
  {
    $("#first-piller").show();
  }
  else
  {
    $("#first-piller").hide();
  }
}

$(document).ready(function(){

    FirstPiller($('#Limit'));
    console.log("Calling");
});

$('#Limit').on('change', function() {
  FirstPiller($(this));
 });

Answer 3

在这种情况下，聪明的做法是将逻辑提取到它自己的函数中（即 togglePillar ）。这样你可以在文档加载时触发它，并在change事件处理程序中作为回调传递它：

$(document).ready(function() {
  var $limit = $('#Limit');
  var $firstPillar = $("#first-piller");
  
  togglePillar();
  
  $limit.on('change', togglePillar);

  function togglePillar() {
    if ($limit.val() == 'true') {
      $firstPillar.show();
    } else {
      $firstPillar.hide();
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Limit">
    <option value="true" selected>Yes</option>
    <option value="false">No</option>
    </select>

<!-- Show hide depending selection -->

<ul id="first-piller">
  <li>
    <div class="left col-sm-6  col-xs-6 text-left left-indent" id="overview">
      <p><b>First Piller</b></p>
    </div>
    <div class="right col-sm-6  col-xs-6" class="pillers">
      <select><option value="1">4 or more</option>
        <option value="2" >0 - 3 </option>
        <option value="3" >0 or more</option>
    </select>
    </div>
  </li>
</ul>

Answer 4

您可以使用.ready功能

$( document ).ready(function() {
 // Code you want to run at the start
})

jQuery show隐藏无序列表取决于选择

4 个答案: