Question

我试图在更改选择内容时重定向到url，并在url查询参数中添加选项文本，我已经尝试过了，但是似乎不起作用：

$(document).ready(function () {
            var url = window.location.href;
            $("#select-opt").change(function() {
                var option = $(this).find('option:selected');
                url = option.data("url");
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="select-opt" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
        <option value="test-select1.html">Value 1</option>
        <option value="test-select2.html">Value 2</option>
        <option value="test-select3.html">Value 3</option>
    </select>

Answer 1

将window.location.href设置为变量，然后更新该变量将不设置window.location.href

我已经将您的onchange代码移到了jquery中，并修复了错误。

我还添加了代码，以将选项中的文本添加到查询字符串中。

$(document).ready(function () {
  $("#select-opt").change(function() {
    var $option = $(this).find(':selected');
    var url = $option.val();
    if (url != "") {
      url += "?text=" + encodeURIComponent($option.text());
      // Show URL rather than redirect
      $("#output").text(url);
      //window.location.href = url;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="select-opt">
  <option value="">Select one</option>
  <option value="test-select1.html">Value 1</option>
  <option value="test-select2.html">Value 2</option>
  <option value="test-select3.html">Value 3</option>
</select>
<div id="output"></div>

Answer 2

我修复了您的代码：

$(document).ready(function () {
    $("#select-opt").change(function() {
        window.location.href = $(this).val();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="select-opt" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
        <option value="test-select1.html">Value 1</option>
        <option value="test-select2.html">Value 2</option>
        <option value="test-select3.html">Value 3</option>
    </select>

Answer 3

您可以执行以下操作：

$('#select-opt').on('change', function() {
    var selectedOption = $(this).val(); //or use this: $(this).find(':selected').val();
    var parameter = '?text=';
    var parameterValue = $(this).find(':selected').text();
    var url = selectedOption+parameter+parameterValue;
    if(selectedOption != "") {
        alert(url);
        //window.location.href=''+url;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-opt">
    <option value="">Select value</option>
    <option value="test-select1.html">Value 1</option>
    <option value="test-select2.html">Value 2</option>
    <option value="test-select3.html">Value 3</option>
</select>

您实际上真的很亲近。您需要将select的值存储为url路径，但将window.location.href保留为自己的函数，只需将url变量放在其末尾即可。

现在，在此示例中，我只是提醒测试/视觉目的的路径。如果您删除警报并取消注释下面的行，则将获得所需的重定向。

或者，您可以使用

$(this).find(':selected').val()

代替

$(this).val()

代表您选择的选项值。我相信这取决于您运行的jQuery版本。

在选择更改重定向到URL jQuery

3 个答案: