在 URL 中显示两个单独的选择框值

2023-12-21

这里是两个选择框,我需要的是如果从两个框中都选择了值,则两者都应该显示在 URL 中,如下所示 例如www.example.com#135+#140 OR www.example.com#135&140(只要两者都显示,这就是主要目的,以哪个顺序并不重要)

 <select name="search_region" id="search_region" class="search_region">
        <option value="0">All Regions</option>
        <option class="level-0" value="135">HTML</option>
        <option class="level-0" value="136">PHP</option>
        <option class="level-0" value="137">CSS</option>
    </select>

    <select name="search_categories" id="search_categories" class="search_categories">
        <option value="">Select Category</option>   
        <option class="level-0" value="140">Java</option>
        <option class="level-0" value="141">Script</option>
    </select>

下面是我运行的脚本,用于显示 URL 中的 #search_regions 值,到目前为止,它运行良好。现在能够将 #search_categories 值添加到其中。

<script type="text/javascript">
$(function(){
    $('#search_region').change(function () {
        var url = $(this).val();
        window.location.hash = url;
        console.log('select Changed');
    });
});
window.addEventListener('hashchange', fn, false);

window.onload = fn; // fire on pageload

function fn() {
    $('#search_region').val(window.location.hash.replace('#', ''));
    console.log("hash = " + window.location.hash);
}
 </script>

关于如何做到这一点有什么想法吗?非常感谢

这是我之前提出的问题的附加内容,请在下面找到链接

获取要在新浏览器中显示的选择值 https://stackoverflow.com/questions/48457056/getting-the-select-value-to-display-in-a-new-browser


1.您需要应用两个选择框的更改事件。

2.您需要将第二个选择框值添加到window.location.hashalso.

工作片段:-

$(function(){
   var url = '';
    $('#search_region').change(function () {
        url = $(this).val();
        window.location.hash = url;
         console.log(window.location.hash);
    });
    $('#search_categories').change(function () {
       if(url !==''){
         window.location.hash = url+"&"+$(this).val();
       }
        console.log(window.location.hash);
    });
});

window.addEventListener('hashchange', fn, false);

window.onload = fn; // fire on pageload

function fn() {
    console.log("hash = " + window.location.hash);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="search_region" id="search_region" class="search_region">
        <option value="0">All Regions</option>
        <option class="level-0" value="135">HTML</option>
        <option class="level-0" value="136">PHP</option>
        <option class="level-0" value="137">CSS</option>
    </select>

    <select name="search_categories" id="search_categories" class="search_categories">
        <option value="">Select Category</option>   
        <option class="level-0" value="140">Java</option>
        <option class="level-0" value="141">Script</option>
    </select>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 URL 中显示两个单独的选择框值 的相关文章

  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 长轮询会冻结浏览器并阻止其他 ajax 请求

    我正在尝试在我的中实现长轮询Spring MVC Web 应用程序 http static springsource org spring docs 2 0 x reference mvc html但在 4 5 个连续 AJAX 请求后它会
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li
  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d

随机推荐

  • 我应该为 PayPal 沙盒使用什么用户名/密码/签名?

    我正在尝试使用 Paypal NVP API 退款交易 我在沙盒帐户中收到了一些付款 但是当我尝试通过 API 发放退款时 我得到了You do not have permissions to make this API call 但我不确
  • 使用 AVPlayer-Swift 无缝循环视频

    我正在使用 AVPlayer 在后台循环播放本地视频 视频播放正常 但完成视频后需要暂停才能循环播放视频 我尝试了很多方法 也看到了很多关于堆栈溢出的帖子 但我未能找到合适的解决方案 我正在使用 Swift3 代码在这里 var video
  • 使用 openxlsx 导入多个 Excel 工作表

    我正在尝试将一个大型 xlsx 文件导入到包含许多数据表的 R 中 我试图通过这样做XLConnect 但是java内存问题 比如描述的那些在这个线程中 https stackoverflow com questions 21937640
  • 当应用程序处于后台时,单击通知时不会调用 fcm.onNotification()

    我已经安装了 cordova plugin fcm 除了一件小事外 一切正常 当应用程序处于后台 关闭并且从 firebase 发送推送通知时 通知会在设备中弹出 单击托盘中的该通知后 我的应用程序开始运行 但控件未进入 fcm onNot
  • 将 HTML 表导出到 Excel 时编码 UTF-8

    我正在尝试使用 javascript 将 HTML 表导出到 Excel 这是 JavaScript 代码
  • while 循环不会以逻辑条件终止

    如果我添加 OR 条件语句 该循环将不会终止 如果其中一个为假 那么它应该终止 全局变量 int x 100 char n malloc 64 void add void do printf Would you like to add 1
  • 100vw DIV 未显示全宽

    我正在努力让灰色div id ex home bottom container 朝向本页底部http patrickbaker biz starter d http patrickbaker biz starter d 整页的宽度 这意味着
  • 在 woocommerce_get_price_html 挂钩中的价格后添加多语言文本

    我正在构建一个 WooCommerce 网站并对其进行自定义 从互联网库复制并粘贴代码 我已成功在 woocommerce 产品中添加 自定义价格和自定义文本 以便可以将它们翻译成不同的语言 这是产品页面的外观 https www prim
  • 从 Internet 下载 URL 中具有特定日期时间的图像

    我正在尝试开发一个应用程序 该应用程序将使用生成的 Url 路径从 Web 服务器获取文件 网络服务器上每秒都会创建一个新文件 我正在尝试访问该文件并将其显示在 PictureBox 中 旧文件不会被删除 我遇到了一些问题 服务器返回404
  • 使用 linq 检查列表计数是否一致

    州有城市 只有在没有平局的情况下 我才需要拥有大多数城市的州 并列意味着排名前 2 的州拥有相同数量的城市 var stateWithMostCities states OrderByDescending p gt p cities Cou
  • 未找到 PHP 类 DateTime

    声明 DateTime 对象时缺少某些内容PHP 5 3 8 我得到一个带有确定日期时间的 JSON 字符串 该字符串被传递到我的 php 控制器 由于某种原因 我没有将其映射为 php 中的 DateTime 对象 但有点奇怪 请参阅以下
  • 转换为 YUV / YCbCr 色彩空间 - 许多版本

    有许多不同的 YUV 颜色转换 但它们都有不同的结果 哪一个是官方正确的 这是我的测试程序的输出 我输入 R 128 G 50 B 50 最大值为 255 该表显示了转换后的 YUV 值和重新转换后的 RGB 值 与原始值不匹配 Colou
  • Javascript d3 从 csv 读取

    好的 所以我对 javascript 有点菜鸟 我需要从 csv 读取数据以使用 d3 制作条形图 条形图对我来说没有问题 从 csv 文件中读取是问题 这是我的代码 var dataset d3 csv gender ratio csv
  • 如何在 keycloak docker 容器中进行数据库备份

    我使用 docker 安装了 keycloakdjango project docker run p 8080 8080 e KEYCLOAK USER admin e KEYCLOAK PASSWORD admin jboss keycl
  • 如何将属性绑定到WPF中Treeview中选定的节点

    如何将自定义属性绑定到MVVM中选定节点的IsSelected属性 我已在运行时将节点加载到树视图中 我正在使用MVVM 这是一个小例子 public abstract class ViewModel INotifyPropertyChan
  • 记住 WPF DataGrid 排序顺序

    这是一个延续这个问题 https stackoverflow com questions 34661767 binding properties width sorting of datagrid on dynamic tabpage 1
  • 如何让HTTP连接在一段时间后超时/断开?

    我是阿帕奇的新手HttpClient 我使用以下代码来获取一定时间间隔后的HTTP连接超时 断开连接 PostMethod method new PostMethod authURL HttpClient client new HttpCl
  • Symfony2 SwiftMailer 无法与主机 smtp.gmail.com 建立连接

    在阅读并测试了很多解决方案后 我仍然收到此错误 我的参数 yml parameters database host 127 0 0 1 database port null database name symfony database us
  • 如何获取 Frames/IFrames 内的 HtmlElement 值?

    我正在使用Winforms WebBrowser控制从下面链接的网站收集视频剪辑的链接 LINK http www fuoriditesta it video divertenti marito ubriaco prende la mogl
  • 在 URL 中显示两个单独的选择框值

    这里是两个选择框 我需要的是如果从两个框中都选择了值 则两者都应该显示在 URL 中 如下所示 例如www example com 135 140 OR www example com 135 140 只要两者都显示 这就是主要目的 以哪个