如何通过使用javascript的html select移动html内容

Question

so here this is like my day 1 to write javascript code "as i mean implementing them into my html" i just kinda stucked for hours to do this 所以这就像我第一天写javascript代码“因为我的意思是将它们实现到我的html中”我只是停留了几个小时才能做到这一点

so basically i just have this registration form like on below 所以基本上我只需要下面的注册表

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

and on my main.js file i've been trying to write down this code : 在我的main.js文件中，我一直在尝试写下以下代码：

function optionselect() {
var A = document.getElementById("selaccount");

var selected = A.SelectedIndex;
if (selected = document.getElementById("typeA"){
$("#formA").appendTo("#regform");}
else if (selected = document.getElementById("typeB){
$("formB).appendTo("#regorm");}
}

and its just didnt show anything even the vscode cant show me the debugger,anyway thanks for any respond,i really appreciate it and sorry for bad english 而且它甚至什么都没有显示，甚至vscode也不能显示调试器，无论如何，感谢您的回复，我真的很感激它，对不起英语不好

Answer 1

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selaccount" onChange="optionselect()"> <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" style="display:none"> <input type = "text" placeholder = "Firstname"> </div> <div id="formB" style="display:none"> <input type = "text" placeholder = "Lastname"> </div> <div id="formC" style="display:none"> <input type = "Text" placeholder = "Email"> </div> </div> <script> function optionselect() { var selected = $("#accounttype").val(); $("#formA").css('display','none'); $("#formB").css('display','none'); $("#formC").css('display','none'); if (selected == "typeA"){ $("#formA").css('display','block'); }else if (selected == "typeB"){ $("#formB").css('display','block'); }else if (selected == "typeC"){ $("#formC").css('display','block'); } } </script>

Answer 2

You dont need to add elements to the form with .appendTo .They are already in. You may want to hide them with CSS display:none . 您不需要使用.appendTo将元素添加到表单中。它们已经存在。您可能希望使用CSS display:none隐藏它们。 An dispay them with JS display:block . 用JS display:block支付他们。

 var<div id="selaccount" onClick="optionselect()"> <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" style="display:none"> <input type="text" placeholder="Firstname"> </div> <div id="formB" style="display:none"> <input type="text" placeholder="Lastname"> </div> <div id="formC" style="display:none"> <input type="Text" placeholder="Email"> </div> </div> <script> function optionselect() { var selected = document.getElementById("accounttype").value; var formA = document.getElementById("formA"); var formB = document.getElementById("formB"); var formC = document.getElementById("formC"); formA.style = "display:none" formB.style = "display:none" formC.style = "display:none" if (selected === "typeA") { formA.style = 'display:block'; } else if (selected === "typeB") { formB.style = 'display:block'; } else if (selected === "typeC") { formC.style = 'display:block'; } } </script>

Answer 3

Try This i hope this will work for you. 试试这个，我希望这对你有用。

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

Answer 4

  function work(uid) { console.log(uid) var input_value = document.getElementById('uid').value; var output_value = "The username is " + input_value; document.getElementById('output_data').innerText = output_value; }

  <script src="wo.js"></script> <input type="text" name="uname" id="uid"> <button type="submit" onclick="work(uid.value)">Submit</button> <p id="output_data"></p>

如何通过使用javascript的html select移动html内容

问题描述

4 个解决方案

解决方案1
2 2018-11-15 10:36:16

解决方案2
1 已采纳 2018-11-15 12:03:53

解决方案3
0 2018-11-15 10:50:46

解决方案4
-1 2018-11-15 11:09:06

如何通过使用javascript的html select移动html内容

问题描述

4 个解决方案

解决方案1 2 2018-11-15 10:36:16

解决方案2 1 已采纳 2018-11-15 12:03:53

解决方案3 0 2018-11-15 10:50:46

解决方案4 -1 2018-11-15 11:09:06

解决方案1
2 2018-11-15 10:36:16

解决方案2
1 已采纳 2018-11-15 12:03:53

解决方案3
0 2018-11-15 10:50:46

解决方案4
-1 2018-11-15 11:09:06