将预先选择下拉选项与jQuery链接起来

wbgh16ku 于 2022-11-03 发布在 jQuery

关注(0)|答案(2)|浏览(145)

我有一个select，其中的选项的值是基于来自div的数据属性用jQuery填充的。
当用户选择一个选项时，将显示具有与该选项的值匹配的数据属性的div。
现在，我尝试创建一个深度链接选项，因此当我有一个类似www.example.com的url时https://my-site.com/page/#option-2，选项-2在select中被预先选择，并且显示带有数据属性选项-2的div。
到目前为止，我有这样的javascript：

$(window).on('load', function() {
  let urlHash = window.location.hash.replace('#','');
  console.log(urlHash);

  if ( urlHash ) {
    $('.dropdown').val(urlHash);
    $('body').find('.location').removeClass('is-active');
    $('body').find(`.location[data-location-hash=${urlHash}]`).addClass('is-active');
  }
});

如果我输入网址https://my-site.com/page/#option-2，该网站将进入无限循环，并且在控制台中显示任何错误的情况下永远不会加载。
如果我在加载时刷新页面，console.log会显示我所期望的正确字符串，但不会显示.location[data-location-hash=option-2]，并且该选项也不会被选中...
我使用了相同的代码来修改下拉菜单的功能，并且可以正常工作，但是在加载功能中却不能正常工作。
JSFiddle，如果有任何帮助的话：https://jsfiddle.net/tsvetkokrastev/b0epz1mL/4/

jquery

来源：https://stackoverflow.com/questions/74194174/link-that-preselect-dropdown-option-with-jquery

2条答案

按热度按时间

rjjhvcjd1#

您的站点正在循环，因为您正在执行window.location.replace
要获取urlHash，应使用

$(window).on('load', function() {
  var href = location.href; // get the url
  var split = href.split("#"); // split the string
  let urlHash = split[1]; // get the value after the hash

  if ( urlHash ) {
    $('.dropdown').val(urlHash);
    $('body').find('.location').removeClass('is-active');
    $('body').find('.location[data-location-hash='+urlHash+']').addClass('is-active');
  }
});

https://codepen.io/darkinfore/pen/MWXWEvM?editors=1111#europe

赞(0）回复(0）举报 2022-11-03

qmelpv7a2#

通过使用函数而不是$(window).on('load')解决了这个问题。还添加了$( window ).on( 'hashchange', function( ) {});以确保js在哈希值更改后能够再次运行。以下是更新后的jsfiddle：https://jsfiddle.net/tsvetkokrastev/b0epz1mL/5/

赞(0）回复(0）举报 2022-11-03

我来回答

将预先选择下拉选项与jQuery链接起来

2条答案

相关问题

热门标签

最新问答