Javascript 打开用户选择语言的窗口_Javascript_Html

Javascript 打开用户选择语言的窗口

javascript html

Javascript 打开用户选择语言的窗口,javascript,html,Javascript,Html,这里有一个选择网页语言的简短表单，有两种语言，一种是马拉地语，另一种是英语，实际上我想要的是：当用户选择英语并提交表单时，english.html页面应该打开并当用户选择marathi languagemarathi.html时，页面应打开 <html> <head> <title>Select Language</title> <link rel="icon" href="hen.png"> <for

这里有一个选择网页语言的简短表单，有两种语言，一种是马拉地语，另一种是英语，实际上我想要的是：当用户选择英语并提交表单时，

english.html

页面应该打开并当用户选择marathi language

marathi.html

时，页面应打开

<html>
<head>
    <title>Select Language</title>
        <link rel="icon" href="hen.png">

<form>
<center>
    <p id="p1">
    Language:<select>
            <option id="English" >English</option>
            <option id="Marathi" >Marathi</option>
            </select>
    </p>
        <input type="submit" id="button" value="Open" >
</center>
</form>
</html>


选择语言

语言：
英语
马拉提

我认为这很明显，但请不要在生产中重复：

 <input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >

您可以将此作为参考，将english.html和marathi.html作为您的目标页面，您可以相应地更改它们

<html>

<head>
    <title>Select Language</title>
    <link rel="icon" href="hen.png">
    <script>
        $('#button').click(function() {
            var selected = $('#language option:selected');
            window.location.href = selected + ".html"
        })
    </script>
</head>

<body>

    <form>
        <center>
            <p id="p1">
                Language:
                <select id="language">
                    <option id="English">English</option>
                    <option id="Marathi">Marathi</option>
                </select>
            </p>
            <input type="submit" id="button" value="Open">
        </center>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>


选择语言
$（“#按钮”）。单击（函数（）{
var selected=$（“#语言选项：selected”）；
window.location.href=selected+“.html”
})

语言：
英语
马拉提

这里有一个简单的方法


英语
马拉提

如果您想使用简单的Javascript创建它，请使用

location.href=“yourPageAddress”
下面是我为同样的问题编写的示例代码：
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function MyFunction(){
            var getValue = document.getElementById("language");
            //console.log(getValue);
            var getIndexValue = getValue.options[getValue.selectedIndex].value;
            //console.log(getValue.selectedIndex);
            //console.log(getIndexValue);

            if(getValue.selectedIndex == 1){
                //console.log("English")
                location.href = "http://www.google.com";
            }
            else if(getValue.selectedIndex == 2){
                //console.log("Marathi");
                location.href = "http://www.yahoo.com";
            }
            else{
                console.log("Wrong Option Selected.");
            }
        }
    </script>
</head>
<body>
Language:
<select name="language" id="language">
    <option>Select..</option>
    <option value="https://www.google.com" id="english">English</option>
    <option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>


试验
函数MyFunction（）{
var getValue=document.getElementById（“语言”）；
//console.log（getValue）；
var getIndexValue=getValue.options[getValue.selectedIndex].value；
//console.log（getValue.selectedIndex）；
//console.log（getIndexValue）；
如果（getValue.selectedIndex==1）{
//控制台日志（“英语”）
location.href=”http://www.google.com";
}
else if（getValue.selectedIndex==2）{
//控制台日志（“马拉地”）；
location.href=”http://www.yahoo.com";
}
否则{
log（“选择了错误的选项”）；
}
}
语言：
选择。。
英语
马拉提


提交

这只是将用户重定向到所选页面的一种方法，也有许多不同的方法来执行相同的操作。
您可能会找到一些标记为comment的console.log语句，该语句仅用于调试目的。
是否要根据用户的选择重定向到页面？是的用户选择语言为什么不在生产中重复它？因为它完全不清楚，并且是0-mainted。作为更好的选择：@Praveen Rana回答。但在现实世界中，为了分离逻辑和ui，您需要使用一些MVVM模式（不一定是框架）。我不同意这么基本的观点，但这是正确的观点。