将选定的文本元素放入文本框，或提交没有文本框的选定单词

debugcn 发表于 Dev

咆哮者

我想允许用户从单词库中选择给定的单词并将其放入文本框中。用户提交输入后，我将创建一个脚本来验证单词的正确顺序。

我现在关注的是如何从单词库中选择单词并将其作为文本（每个单词之间留有空格）放入文本框中。

如何才能做到这一点？当用户单击单词时，仅放置中文单词，而不放置英语单词。

编辑：单词不一定需要在文本框中。我只希望用户能够从单词库中选择单词，点击“提交”，然后允许按该顺序解析单词。我认为提交字符串的方法是通过文本框。

在此处输入图片说明

HTML：

Create sentence:

<input type="text" id="test"  value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>

<div class="wordBank_Headings">Word Bank:
    <span class="wordBank_Words"></span>
</div>

JavaScript：

var words = {
    "task1" :
    {
        'Ni'    : 'you',
        'Wo'    : 'I',
        'Hao'   : 'good',
        'Shi'   : 'am'  
    }
}

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
            $(".wordBank_Words").append("<li><b>" + key + "</b>: " + words[obj][key] + "</li>");
        }
    }
}

function submitMe() {
//will eventually verify input from textbox
    var value = document.getElementById('test').value;
    alert(value);
}

不喜欢

向li添加一个属性。然后，您可以在点击事件中完成该操作

function bank() {
        $(".wordBank_Words").empty();
        for (obj in words) {
            for (key in words[obj]) {
                $(".wordBank_Words").append("<li class='bank-word' data-display-word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
            }
        }
    }

    bank();

    $(".bank-word").click(function (event) {

        $('#test').val($('#test').val() + " " + $(this).attr('data-display-word'));
        $(this).hide();
    });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。