如何通過使用javascript的html select移動html內容
[英]how to move html content by html select with javascript
問題描述
所以這就像我第一天寫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也不能顯示調試器，無論如何，感謝您的回復，我真的很感激它，對不起英語不好
4 個解決方案
解決方案1
2 2018-11-15 10:36:16
<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
1 已采納 2018-11-15 12:03:53
您不需要使用.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>
解決方案3
0 2018-11-15 10:50:46
試試這個，我希望這對你有用。
<!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>
解決方案4
-1 2018-11-15 11:09:06
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>
如何在 html/javascript 中將圖像移動到鼠標 position？
[英]How to move an image to the mouse position in html/javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.