[英]JQuery Mobile - appending text areas to existing page
我希望在我的網頁上的 JQuery Mobile 中附加一個新的(動態創建)文本區域。 我的頁面頂部有一個多選框,根據我選擇的選項,我想添加 x 個文本區域。 我該如何開始?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Home</h1><!--Header text-->
</div>
<div data-role="content">
<form method="post" data-id="two">
<label for="select-choice-6" class="select">Search by:</label>
<select name="select-choice-6" id="select-choice-6" class="select" multiple="multiple" data-native-menu="false">
<option>Search by:</option>
<option value="id">Student ID</option>
<option value="permit">Permit</option>
<option value="license">License Plate</option>
<option value="first">First Name</option>
<option value="last">Last Name</option>
<option value="lot">Lot Code</option>
</select>
<script>
//.......
for(var j = 0; j < counts; j++)
{
$('form', "#two").append("<textarea name=\"textarea\""+(j+1)+" id=\"textarea+\""+(j+1)+" placeholder=\"");
var str = stuffArray.pop();
alert(str);
switch(str)
{
case "id":
$('form', "#two").append("Student ID");
break;
case "permit":
$('form', "#two").append("Parking Permit");
break;
case "license":
$('form', "#two").append("License Plate");
break;
case "first":
$('form', "#two").append("First Name");
break;
case "last":
$('form', "#two").append("Last Name");
break;
case "lot":
$('form', "#two").append("Lot");
break;
default:
alert("default case");
break;
}
$('form', "#two").append("\"></textarea><br>");
$("#home").trigger("create");
}
//......
</script>
stuffArray 是一個 String 數組,用於保存用戶想要的框的值。 這里的第二位代碼只是附加正確的標簽以顯示文本區域,但代碼中似乎有問題。
這是我的解決方案:
在表單中添加了一個 div 來保存文本區域:
<!-- A new div in the DOM for holding the text areas -->
<div id="text-areas"></div>
這是注釋的 JavaScript:
// Bind an event handler to the change event (when the selected options change)
$("#select-choice-6").change(function() {
// Create an empty array for pushing string values (this is more efficient than appending strings)
var stringBuilder = [];
// Empty the text-areas div so it doesn't accumulate text areas
$("#text-areas").empty();
$("#select-choice-6 option").each(function(index, item){
// For each option in the select, check if it is selected
if($(item).prop("selected")){
// Push a new text area onto the stringBuilder array
var textAreaName = "textarea" + index;
var textAreaPlaceholder = $(item).html();
stringBuilder.push("<textarea name='");
stringBuilder.push(textAreaName);
stringBuilder.push("' id='");
stringBuilder.push(textAreaName);
stringBuilder.push("' placeholder='");
stringBuilder.push(textAreaPlaceholder);
stringBuilder.push("'></textarea>");
}
});
// After iterating over all options, join the array of strings into one and append it to the text-areas div
$("#text-areas").append(stringBuilder.join(''));
});
這是工作JSFiddle的鏈接: JSFiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.