Question

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

我能够使用jQuery进行填充并为不同的按钮链接分配特定功能，因此例如BTNLINK-1将在SUBJECT中显示文本AAA而在Summernote字段中显示AABB，BTNLINK-2将在SUBJECT中显示文本BBB和夏令时的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字段。

我明白我应该在选择下拉列表中为每个案例添加一些变量，我只是卡住...

由于

Answer 1

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

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

Answer 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

Answer 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');

}

jQuery填充输入字段和summernote

3 个答案: