Question

请参阅下面的代码。这是移动网站的导航。选择类别会加载所选的类别页面，该页面列出该类别中的所有产品。（例如，选择Fruits会加载/fruits类别页面，其中列出了指向apple，banana，orange等的链接。）查看产品页面时，<select>中只显示类别名称，而不是产品名称。我想通过选择Fruits来回到apple产品页面的水果类别列表。但由于它已被选中，因此change事件未被触发。如何才能收到有关此操作的通知（当前所选项目未被更改，但又被选中）？

<select onchange="location.href = event.target.options[event.target.selectedIndex].getAttribute('data-href');">
    <option data-href="/vegetables">Vegetables
    <option data-href="/fruits" selected>Fruits
</select>

Answer 1

我不知道这样的事件，但这个技巧完美无缺。作为隐藏选项，当前类别应再次添加到<select>。选中此选项而不是可见选项，因此即使选择当前类别也会触发change事件。

<select onchange="location.href = event.target.options[event.target.selectedIndex].getAttribute('data-href');">
    <option hidden selected>Fruits
    <option data-href="/vegetables">Vegetables
    <option data-href="/fruits">Fruits
</select>

重新选择<option selected =“”>时如何获得通知？

1 个答案: