如何将 html 内容移动 html select 和 javascript

Question

所以这就像我第一天写 javascript 代码 "as i mean implementing them into my 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>

在我的 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");}
}

它只是没有显示任何东西，甚至 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

尝试一下，希望对您有用。

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

    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>

Answer 4

您不需要向带有 .appendTo 的表单添加元素。它们已经存在。您可能希望使用 CSS display:none 隐藏它们。用 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>

如何将 html 内容移动 html select 和 javascript

how to move html content by html select with javascript

html

javascript

select

append

options