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

【问题标题】：how to move html content by html select with javascript如何通过 html 选择使用 javascript 移动 html 内容
【发布时间】：2019-04-18 10:03:57
【问题描述】：

所以这就像我第一天编写 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>

在我的 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 也无法向我显示调试器，无论如何感谢您的任何回复，我真的很感激抱歉英语不好

【问题讨论】：

首先。你那里有很多错别字。第二 - 不要混合使用 jquery 和 vanilla js。
你想达到什么目标？
嗨@sukehiro。你想干什么？？
@Smollet777 实际上我只是想在选择选择时进行 regform 切换
@Smollet777 呃抱歉我不知道 javascript 不能这样做

标签： javascript html select append options

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

@sukehiro 试试这个

【解决方案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>

【讨论】：

这与问题有什么关系？

【解决方案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>

【讨论】：

老兄，它对我有用，非常感谢你挽救了我的生命，无论如何我只是使用 onchange 而不是 onclick，因为有时它在我的浏览器上不起作用*干杯