jQuery 填充输入字段和summernote答案

【问题标题】：jQuery populate an input field and summernotejQuery 填充输入字段和summernote
【发布时间】：2017-10-30 03:12:30
【问题描述】：

我需要同时填充一个输入字段和一个summernote，但在输入和summernote 上显示不同的文本。

我能够使用 jQuery 进行填充并将特定功能分配给不同的按钮链接，因此例如 BTNLINK-1 将在 SUBJECT 中显示文本 AAA，在 Summernote 字段中显示 AABB，BTNLINK-2 将在 SUBJECT 中显示文本 BBB Summernote 中的 BBCC 等等。下面是我如何做到这一点的示例代码：

<div class="form-group">
<label for="name">Template</label><br>
<a class="btn btn-default" id="btn1">Template1</a>
<a class="btn btn-danger" id="btn2">Template2</a>

<div class="form-group">
<label for="subject">SUBJECT:</label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Write your subject" required/>

<div class="form-group">
    <label for="message">Message:</label>
    <textarea class="input-block-level summernote-modal"  id="textfield" name="message"></textarea>
</div>

jQuery 代码：

$(document).ready(function(){
$("#btn1").click(function(){
    $("#subject").val("AAA");
    $(".summernote-modal").summernote('code', '<p>AABB</p>');
});
$("#btn2").click(function(){
    $("#subject").val("BBB");
    $(".summernote-modal").summernote('code', '<p>BBCC</p>');
});
}

现在按钮已变为 8 个，我们计划添加更多按钮，因此此解决方案在表单中占用了大量空间。你能帮我从链接转换为下拉列表，所以当我从列表中选择一个项目时，它会自动更新输入字段和 Summernote 字段？

我已经尝试了 Stackoverflow 上的一些可用选项，我可以在其中填充输入字段的值，但不能填充始终为空白的 Summernote 字段。

我知道我应该在选择下拉列表时为每个案例添加一些变量，我只是卡住了......

谢谢

【问题讨论】：

因此，您应该在 html 中添加一个下拉列表，然后将您的 javascript 从使用 <a> 更改为使用 <select> 将是微不足道的。

标签： javascript jquery html drop-down-menu

【解决方案1】：

假设您有一个 id 属性 = "yourSelect" 的选择框，并且您想用所选选项的相同“值”填充文本字段和 RTE 字段：

$(document).ready(function(){
$("#yourSelect").change(function(){
    $("#subject").val($(this).val());
    $(".summernote-modal").summernote('code', '<p>' + $(this).val() + '</p>');
});
}

【讨论】：

实际上，对于每个选择，我必须为 #subject 显示不同的文本，为 .summernote-modal 显示不同的文本
这些从哪里来？选项有一个值和一个显示值，所以理论上有两个地方，但是你用下拉的时候看不到值，所以我不知道。

【解决方案2】：

我已经以这种方式解决了，希望这对将来的其他人有所帮助：

我有一个选择框

<select id="template" class="chosen-select">
        <option value="">-</option>
        <optgroup label="English">
            <option value="1">Welcome1</option>
            <option value="2">Welcome2</option>
            <option value="3">Welcome3</option>
        </optgroup>
</select>

JavaScript 将是：

<script type="text/javascript">
$(document).ready(function(){
    $('select[id="template"]').change(function(){
        if ($("#template").val() == "")
            {
                $("#subject").val("");
                $(".summernote-modal").summernote('code', '');
            }
        if ($("#template").val() == "1")
            {
                $("#subject").val("Welcome1 subject");
                $(".summernote-modal").summernote('code', '<p>Welcome 1 text</p>');
            }
        if ($("#template").val() == "2")
            {
                $("#subject").val("Welcome2 subject");
                $(".summernote-modal").summernote('code', '<p>Welcome2 text</p>');
            }
        if ($("#template").val() == "3")
            {
                $("#subject").val("Welcome3 subject");
                $(".summernote-modal").summernote('code', '<p>Welcome3 text</p>');
            }
});
});
</script>

因此，根据用户从下拉列表中选择的内容，两个字段会发生变化，其中一个字段是 Summernote

【讨论】：

【解决方案3】：

函数 GetUserDetails(id){ $('hidden_blog_id').val(id);

$.post("<?php echo base_url('Crud/Updatecontent');?>",{
    id:id
}, function(data,status){
    var user = JSON.parse(data);
    $('#blogtitle').val(user.title);
    $('#my_image').attr('src',user.image_path);
    $('#blogimagepath').html(user.image_path);
    $('#blogstatus').val(user.status);
    $('#blogshortdesc').summernote('code',user.short_desc);
    $('#blogextradesc').summernote('code',user.extra_desc);
}
    );
    $('#update_blog_model').modal('show');

}

【讨论】：