如何使用javascript通过html选择移动html内容_Javascript_Html_Select_Append_Options

如何使用javascript通过html选择移动html内容

javascript html select

如何使用javascript通过html选择移动html内容,javascript,html,select,append,options,Javascript,Html,Select,Append,Options,所以这就像我第一天写javascript代码一样“我的意思是将它们实现到我的html中”，我只是花了几个小时才这么做基本上我只有下面的登记表 <div id="selaccount"> <select id = "accounttype" <option id = "typeA">Firstname</option> <option id = "typeB">Lastname</option> <option id = "

所以这就像我第一天写javascript代码一样“我的意思是将它们实现到我的html中”，我只是花了几个小时才这么做

基本上我只有下面的登记表

<div id="selaccount">
<select id = "accounttype"
<option id = "typeA">Firstname</option>
<option id = "typeB">Lastname</option>
<option id = "typeC">Email<option>
</select> 
</div>

<div id="regform">
<div id="formA">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC">
<input type = "Text" placeholder = "Email">
</div>
</div>
</body>
<script src ="main.js"> </script>
</html>

它只是没有显示任何东西，甚至vscode也不能显示调试器，无论如何，感谢您的回复，我真的很感激对不起，英语不好


名字
姓氏
电子邮件
函数选项选择（）{
所选变量=$（“#accounttype”）.val（）；
$（“#formA”）.css（'display'，'none'）；
$（“#formB”）.css（'display'，'none'）；
$（“#formC”）.css（'display'，'none'）；
如果（选定==“类型A”）{
$（“#formA”）.css（'display'，'block'）；
}else if（已选==“类型B”）{
$（“#formB”）.css（'display'，'block'）；
}else if（已选==“类型C”）{
$（“#formC”）.css（'display'，'block'）；
}
}

试试这个我希望这对你有用

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function optionselect() {
            var selected = $('#accounttype').val();
            $("#formA").hide();
            $("#formB").hide();
            $("#formC").hide();
            if (selected == "typeA") {
                $("#formA").show();
            }
            else if (selected == "typeB") {
                $("#formB").show();
            }
            else if (selected == "typeC") {
                $("#formC").show();
            }
        }
        $(document).ready(function () {
            optionselect();
            $('body').on('change', '#accounttype', function () {
                optionselect();
            });
        });
    </script>
</head>
<body>
    <div id="selaccount">
        <select id="accounttype">
            <option value="typeA">Firstname</option>
            <option value="typeB">Lastname</option>
            <option value="typeC">Email
            <option>
        </select>
    </div>

    <div id="regform">
        <div id="formA">
            <input type="text" placeholder="Firstname" />
        </div>
        <div id="formB">
            <input type="text" placeholder="Lastname" />
        </div>
        <div id="formC">
            <input type="Text" placeholder="Email" />
        </div>
    </div>
</body>
</html>


函数选项选择（）{
var selected=$（'\accounttype'）.val（）；
$（“#formA”）.hide（）；
$（“#formB”）.hide（）；
$（“#formC”）.hide（）；
如果（选定==“类型A”）{
$（“#formA”）.show（）；
}
else if（已选==“类型B”）{
$（“#formB”）.show（）；
}
else if（已选==“类型C”）{
$（“#formC”）.show（）；
}
}
$（文档）.ready（函数（）{
选项选择（）；
$（'body'）。关于（'change'，'#accounttype'，函数（）{
选项选择（）；
});
});
名字
姓氏
电子邮件

功能工作（uid）{
控制台日志（uid）
var input_value=document.getElementById（'uid'）.value；
var output_value=“用户名为”+input_value；
document.getElementById（'output_data'）。innerText=output_值；
}


提交

您不需要使用

.appendTo

将元素添加到表单中。它们已经在表单中。您可能希望使用CSS

display:none

隐藏它们。用JS

display:block

显示它们

var
名字
姓氏
电子邮件
函数选项选择（）{
所选变量=document.getElementById（“accounttype”）.value；
var formA=document.getElementById（“formA”）；
var formB=document.getElementById（“formB”）；
var formC=document.getElementById（“formC”）；
form.style=“显示：无”
formB.style=“显示：无”
formC.style=“显示：无”
如果（选定==“类型A”）{
formA.style='显示：块'；
}else if（已选==“类型B”）{
formB.style='display:block'；
}else if（已选==“类型C”）{
formC.style='display:block'；
}
}

Firs of all。你有很多打字错误。第二，不要把jquery和香草js混在一起。你想得到什么？嗨@sukehiro。你想做什么？？？@Smollet777实际上我只是想在选择selected@Smollet777抱歉，我不知道javascript做不到this@sukehiro试试看这和这个问题有什么关系？老兄，这对我来说很有用谢谢你救了我一辈子，不管怎样，我只是用onchange而不是onclick，因为有时候它在我的浏览器上不起作用

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function optionselect() {
            var selected = $('#accounttype').val();
            $("#formA").hide();
            $("#formB").hide();
            $("#formC").hide();
            if (selected == "typeA") {
                $("#formA").show();
            }
            else if (selected == "typeB") {
                $("#formB").show();
            }
            else if (selected == "typeC") {
                $("#formC").show();
            }
        }
        $(document).ready(function () {
            optionselect();
            $('body').on('change', '#accounttype', function () {
                optionselect();
            });
        });
    </script>
</head>
<body>
    <div id="selaccount">
        <select id="accounttype">
            <option value="typeA">Firstname</option>
            <option value="typeB">Lastname</option>
            <option value="typeC">Email
            <option>
        </select>
    </div>

    <div id="regform">
        <div id="formA">
            <input type="text" placeholder="Firstname" />
        </div>
        <div id="formB">
            <input type="text" placeholder="Lastname" />
        </div>
        <div id="formC">
            <input type="Text" placeholder="Email" />
        </div>
    </div>
</body>
</html>