主页 / 问题 / 1472151
Accepted
Maksym Vintoniak
Asked:2022-11-29 11:04:28 +0000 UTC2022-11-29 11:04:28 +0000 UTC

选择后显示信息select

  • 772

你好，问题如下，有一个select

const selector = $('.evidence-select');

function update() {
  const value = selector.val();
  const theIndex = parseInt(value) - 1;
  $('.evidence-content').each(function(index, el) {
    $(el)[index === theIndex ? 'show' : 'hide']();
  });
};

selector.on('click', update);
update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="wheredevaice" class="evidence-select">
  <option value="1">Животные</option>
  <optgroup label="Недвижимость">
    <option value="2">Дом</option>
    <option value="3" selected>Дача</option>
  </optgroup>
</select>

需要选择“Animals”后显示一个带表格的方块，在PC上正常显示，但在手机上有问题，选择后需要再次点击选择（这样会出现菜单）它会正常显示，可能是什么问题，如果您提出自己的解决方案，我将很高兴。

我会再次写到你需要显示方块，在选择“动物”选项后，我已经上过论坛，阅读并测试过，这是你最后的机会

javascript

1 个回答

  1. Best Answer

    您正在使用一个事件click，因此在单击时它会在单击选择时获取值。但是此时select中还保留着旧值，所以必须再次点击select才能显示新值对应的block。使用事件change而不是click：

    const selector = $('.evidence-select');

function update() {

  const value = selector.val();

  const theIndex = parseInt(value) - 1;

  $('.evidence-content').each(function(index, el) {

    $(el)[index === theIndex ? 'show' : 'hide']();

  });


};

selector.on('change', update);

update();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="wheredevaice" class="evidence-select">
  <option value="1">Животные</option>
  <optgroup label="Недвижимость">
    <option value="2">Дом</option>
    <option value="3" selected>Дача</option>
  </optgroup>
</select>

<div class="evidence">
  <div class="evidence-content">123</div>
  <div class="evidence-content">456</div>
  <div class="evidence-content">789</div>
</div>

    • 1

相关问题