Reload page after user clicks on combobox (with some rules)

问题

I'm new in javascript and need I to reload the current page after user clicks on the options of combobox, but I have some rules.

The two comboboxes:

<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>

Rules:

user clicks on "0" in the first combobox, reload to comboA=0.
user clicks on "1" in the first combobox, replaces "0" to "1" and reload to comboA=1
user clicks on "2" in the second combobox, concatenate and reload to comboA=1 & comboB=2
user clicks on "3" in the second combobox, replaces "2" to "3" and reload to comboA=1 comboB=3

The steps above need to be done in sequence.

How the functions "Refresh" and "Refresh2" should be?

Thanks.

回答1:

I won't give you the code directly, but I can help you research your answer so that you can learn JavaScript as you go along.

You can use jQuery so help you out but specifically .change() function to detect if the combo box is changed: http://api.jquery.com/change/

To actually refresh the page, or change to another page, you can use the window.location function to direct the user to a page. Window.location.href and Window.open () methods in JavaScript

To actually change elements on the page, without reloading the page, you can use jQuery ajax to post changes to PHP if you need to. http://api.jquery.com/jquery.ajax/

I hope this helps you out in your quest to learn more JavaScript

回答2:

The first function would simply have to navigate to a the same url followed by ?comboA= then the first argument, like this:

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

The second function would have to keep the ?comboA=value part so it would split after the first & instead:

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

回答3:

Try below code in 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
    }
}

Write same function for other combo box. I hope these will help you out!! Let me know if you have any question

回答4:

you can do it like following:

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

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

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


});

and for second select

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

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

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


});

来源：https://stackoverflow.com/questions/24832160/reload-page-after-user-clicks-on-combobox-with-some-rules

标签

javascript

jquery

html

combobox