javascript - ajax调用成功后添加文本区域

Question

我有一个已下拉的表单。选择下拉菜单后，文本必须与相关下拉菜单值一起显示。我正在使用 Flask、jquery、jinja 和 html。我在这里添加我尝试过的任何内容。

<div class="col-md-4">
    <select name="select1" class="form-control" id="select1" style="width:200px; height:30px;" required>
        <option value="">Select the below option</option>
        {% for each_round in round_names %}
        <option value="{{each_round.round_id,each_round.round_name}}">{{each_round.round_name}}</option>
        {% endfor %}
    </select>
    <div class="valid-feedback">Valid</div>
    <div class="invalid-feedback">Please fill out this field</div>
    <div id="resultDiv">
        {{results}}
        <textarea name="rdesc" id="rdesc" style="width:200px; height:300px;" required>{{results}}</textarea>
    </div>
</div>

$("select[name='select1']").change(function() {
    var dropdownValue = document.getElementById("select1");
    var roundName = dropdownValue.options[dropdownValue.selectedIndex].value;
    console.log(roundName);

    $.ajax({
        type: 'POST',
        url: '/roundname/get-description',
        data: {
            'round_name': roundName
        },
        success: function(results) {
            console.log(results);
            $("textarea[id='resultDiv']").html(results);
        }
    })
})

发生的事情是:1.当我登陆表单本身时，会显示空白文本区域2.我选择下拉值后，不显示相关值

我需要的是:1.除非我选择下拉菜单，否则文本区域不应显示2. 选择下拉列表后，文本区域应该显示数据。

我也尝试过这个 Text area on ajax success

Answer 1

我建议为了隐藏文本区域，您应该使用 css 中的 display:none 属性，如果您想要文本区域不应显示，除非我选择下拉列表 不仅仅是使用 jquery 更改 display 属性 $("#id").css("display", "block"); 或者您可以使用 jquery预定义方法

1. $('#id').hide();
2. $('#id').show();

关于您的另一个查询，即一旦我选择下拉菜单，文本区域应该显示数据。您应该使用$("#rdesc").val(results); 而不是使用 $("textarea[id='resultDiv']").html(results);