Question

我希望将用户重定向到选择值中指定的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>

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

Answer 1

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

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/

Answer 2

您的按钮在带有类型=“ submit”的表单标签中。提交将查询字符串http://yoursite.com?yourQueryToServer添加到您的URL中，以发送到服务器。

如果要将按钮保留在表单标签中，请更改type =“ button”

尝试一下。

我不太了解为什么要有一个提交按钮，但是您重新加载了onChange，所以我进行了更改。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <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="button" class="hero-form-btn" onClick="WinOpen();">Go &#8594;</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        $('span').on('change', function (val) {

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

            if (url) {
                window.location = url;
            }
        });
        function changePage() {
            window.location = url;
        }
    </script>
</body>

</html>

或重新加载onChange

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <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="button" class="hero-form-btn" onClick="WinOpen();">Go &#8594;</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        var url = null

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

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

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

</html>

Answer 3

提交的目的是什么？除了重定向用户外，实际上还会发生什么？如果仅用于重定向，则将按钮类型更改为button而不是Submit，因为当您单击Submit时，您将刷新页面，并且分配给该函数（winOpen）的任何代码都不会执行...

如果您不需要实际提交表单，则您的代码可以是这样的：

let url = document.querySelectorAll('input[name="services"]');
for (let i=0; i < url.length; i++) {
  url[i].addEventListener('change', function() {
    document.querySelectorAll('form > button')[0].setAttribute('onclick', 'window.location.assign("'+url[i].value+'")');
  });
};

<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.microsoft.com" id="sort-low"><label for="sort-low">Option 2</label>
         <input type="radio" name="services" value="http://www.stackoverflow.com" id="sort-high"><label for="sort-high">Option 3</label>
         <input type="radio" name="services" value="http://www.mdn.com" id="sort-brand"><label for="sort-brand">Option 4</label>
         <input type="radio" name="services" value="http://www.cnn.com" id="sort-name"><label for="sort-name">Option 5</label>
     </span>
     <button type="button" class="hero-form-btn">Go &#8594;</button>
 </form>

Answer 4

o button click option place windowlocation.href   I modify the code  <script>
        var url = null
	
        jQuery(function ($) {
           // $('span').on('change', function (val) {
		$('.hero-form-btn').on('click',function(e){
                var url = $("input[name='services']:checked").val();

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

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

4 个答案: