用户点击组合框后重新加载页面（有一些规则）

Posted 2023-03-05

【中文标题】用户点击组合框后重新加载页面（有一些规则）

【英文标题】：Reload page after user clicks on combobox (with some rules)

【发布时间】：2014-09-10 00:20:24

【问题描述】：

我是 javascript 新手，需要在用户单击组合框的选项后重新加载当前页面，但我有一些规则。

两个组合框：

<select onChange="Refresh(this.value)" name="comboA">
    <option value="0">0</option>
    <option value="1">1</option>
</select>

<select onChange="Refresh2(this.value)" name="comboB">
    <option value="2">2</option>
    <option value="3">3</option>
</select>

规则：

用户点击第一个组合框中的“0”，重新加载到comboA=0。 用户点击第一个组合框中的“1”，将“0”替换为“1”并重新加载到comboA=1 用户点击第二个组合框中的“2”，连接并重新加载到comboA=1 & comboB=2 用户点击第二个组合框中的“3”，将“2”替换为“3”并重新加载到comboA=1 comboB=3

以上步骤需要按顺序进行。

"Refresh"和"Refresh2"的函数应该是怎样的？

谢谢。

【参考方案1】：

我不会直接给你代码，但我可以帮助你研究你的答案，这样你就可以一边学习 JavaScript。

您可以使用 jQuery 来帮助您，但特别是 .change() 函数来检测组合框是否已更改：http://api.jquery.com/change/

要真正刷新页面，或切换到另一个页面，您可以使用 window.location 函数将用户引导到一个页面。 Window.location.href and Window.open () methods in JavaScript

要实际更改页面上的元素，而无需重新加载页面，如果需要，您可以使用 jQuery ajax 将更改发布到 php。 http://api.jquery.com/jquery.ajax/

我希望这可以帮助您学习更多 JavaScript

【参考方案2】：

第一个函数只需导航到相同的 url，然后是 ?comboA=，然后是第一个参数，如下所示：

function Refresh(value) 
    URL = window.location.href.split("?")[0];
    window.location.replace(URL + "?comboA=" + value);

第二个函数必须保留 ?comboA=value 部分，以便它在第一个 & 之后拆分：

function Refresh2(value) 
    URL = window.location.href.split("&")[0];
    window.location.replace(URL + "&comboB=" + value);

【参考方案3】：

在 javascript 中尝试以下代码

    function Refresh()

    var e = document.getElementById("comboA");
    var selectedOption = e.options[e.selectedIndex].value;

if(selectedOption == "0")
    
    // your logic goes here
       
else if (selectedOption == "1")
    
    // your logic goes here
    

为其他组合框编写相同的函数。 希望这些能帮到你！！ 如果您有任何问题，请告诉我

【参考方案4】：

你可以这样做：

var url = "http://www.mypage.com?"

$("select[name=comboA]").on("change",function()

window.location.href = url + $(this).attr("name") + "=" + $(this).val();


);

第二次选择

var url2 = "http://www.mypage.com?comboA=1&"

$("select[name=comboB]").on("change",function()

window.location.href = url2 + $(this).attr("name") + "=" + $(this).val();


);