javascript - 在选择提交时重定向到值url

原文 标签 javascript jquery html css

我想将用户重定向到选择值中指定的URL。对于样式选择,我必须走一条自定义路线,因此要设置它。我是否处理错误?如果是,最有效的处理方法是什么?

的HTML

<form>
    <span class="dropdown-el" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
         <input type="radio" name="services" value="Relevance" checked="checked" id="services">
         <label for="services">Select one ...</label>
         <input type="radio" name="services" value="http://www.google.com" id="sort-best"><label for="sort-best">Option 1</label>
         <input type="radio" name="services" value="http://www.google.com" id="sort-low"><label for="sort-low">Option 2</label>
         <input type="radio" name="services" value="http://www.google.com" id="sort-high"><label for="sort-high">Option 3</label>
         <input type="radio" name="services" value="http://www.google.com" id="sort-brand"><label for="sort-brand">Option 4</label>
         <input type="radio" name="services" value="http://www.google.com" id="sort-name"><label for="sort-name">Option 5</label>
     </span>
     <button type="submit" class="hero-form-btn" onClick="WinOpen();">Go &#8594;</button>
 </form>


jQuery / JavaScript

<script>
    jQuery(function($) {
        $('span').on('change', function() {
            var url = $(this).val();

            if (url) {
                window.location = url;
            }
            return false;
        });
    });
</script>


我已经看了很多遍,以至于我开始迷路了。任何帮助深表感谢。

最佳答案

您应该从选定的单选按钮获取值:

jQuery(function($) {
    $('span').on('change', function(val) {

        var url = $("input[name='services']:checked").val();

        if (url) {
            window.location = url;
        }
        return false;
    });
});


您可以在这里进行测试:
https://jsfiddle.net/6k8cnxhp/

关于javascript - 在选择提交时重定向到值url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59439456/

相关文章:

html - 导航栏端盖

javascript - 保存或查看表单(使用 Django 模板系统)

javascript - 使用箭头函数作为传递给requestAnimationFrame的方法

javascript - Rails turbolinks JS 文件 Bug

jquery - CORS 与 python baseHTTPserver 501(不支持的方法 ('OPTIONS' ))在 Chrome 中

javascript - .hover() 在具有子 ID 的父级上触发

javascript - 更改图像/svg以正确显示网页上的风景或肖像

javascript - 避免React setState()回调循环

javascript - 从Rails View 填充HighChart数据

javascript - 使用 Date() 为时区转换具有指定偏移量的时间戳;