如何使用javascript的两个下拉菜单选择进行页面重定向

Question

I am a total beginner to JavaScript and appreciate your help with my question.

I need to have two drop down menus, each with URL values, when selected, would append together and redirect to the selected URL after hitting a submit button.

It is similar to the live example from a similar article: http://www.jsfiddle.net/Yxw7k/13

If the value of the second option in the first drop down was lets say: /a/something1 , and the value of the third option in the second drop down was /3/index.html , after hitting submit you'd be redirected to www.somesite.com/a/something1/3/index.html​ I am hoping to achieve this without the use of jQuery. How could I use regular JS to achieve this?

Answer 1

I'd suggest something like the following:

function makePath(directory, file, domain) {
    if (!directory || !file) {
        return false;
    }
    else {
        directory = directory.nodeType == 1 ? directory.value : document.getElementById(directory).value;
        file = file.nodeType == 1 ? file.value : document.getElementById(file).value;
        return newURL = [domain || 'http://' + location.hostname, directory, file].join('/');
    }
}

document.getElementById('fileName').onblur = function(){
    // using console.log() in the demo
    document.location = makePath('directoryPath', this, 'http://example.com');
}

JS Fiddle demo .

The above is used with the following HTML:

<select id="directoryPath">
    <option>directoryA</option>
    <option>directoryB</option>
    <option>directoryC</option>
</select>


<select id="fileName">
    <option>file1.html</option>
    <option>file2.html</option>
    <option>file3.html</option>
</select>

Answer 2

with jquery is more easy select the values, you could make a function who detect the values selected and then update the redirection link when the user press the submit button. So you need add the function to the onclick event of the button.