Fatal编程技术网
  • javascript/
  • Javascript JQuery Mobile-将文本区域附加到现有页面

Javascript JQuery Mobile-将文本区域附加到现有页面

javascript jquery jquery-mobile

Javascript JQuery Mobile-将文本区域附加到现有页面,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我希望在我的网页上的JQuery Mobile中添加一个新的、动态创建的文本区域。我在页面顶部有一个多选框，根据我选择的选项，我想添加x个文本区域。我该怎么开始呢 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l

我希望在我的网页上的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>
stuffArray是一个字符串数组，它保存用户想要的框的值。这里的第二段代码只是附加正确的标记以显示文本区域，但代码中似乎有一个小问题。

这是我的解决方案：

在表单中添加了一个用于保存文本区域的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(''));
});
下面是一个指向工作JSFIDLE的链接：

你能试试看它是否有效吗？@Spokey，你想让我在我的第二个代码部分底部的第五行添加这个吗。编辑：不，这不会改变任何东西。通常，我找不到两个id。您的意思是数据id吗？@Spokey将其更改为[data id='two']格式，如果没有该格式，则无法再次使用。只需表单[dataid='two'] 
// 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(''));
});