Javascript jQuery填充一个输入字段和一个注释

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

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

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字段，该字段始终为空

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

---

谢谢

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

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

---

我已经这样解决了，希望这对以后的其他人有所帮助：

我有一个选择框

<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函数GetUserDetailsid{ $'hidden_blog_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');

}

---

因此，您应该在html中添加一个下拉列表，而javascript从使用到使用的更改将是微不足道的。实际上，对于每个选择，我必须为主题显示不同的文本，为主题显示不同的文本。summernote modal这些文本将从何而来？选项有一个值和一个显示值，所以理论上有两个位置，但是当你使用下拉列表时，你看不到值，所以我不知道。

<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>

$.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');