个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:34:49 24 4
gpt4 key购买 nike

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

最佳答案

这是我的解决方案:

向表单添加了一个 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

关于javascript - JQuery Mobile - 将文本区域附加到现有页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16904239/

24 4 0
文章推荐： jquery - 绑定(bind)手动输入值并将偏差报告到另一个输入列
文章推荐： jquery - qUnit:在 qunit-fixture 之外编写的 Twitter Bootstrap 模式
文章推荐： javascript - 枚举每行 HTML 中的数字
文章推荐： jquery - 如何使用 jquery 禁用 cakephp 中的 poSTLink？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com