jQuery：将值设置为选择输入字段

Question

我正在使用Django forms 构建一个编辑表单。当用户单击特定表行时，它将打开一个editModal 并获取该表行的值。但是，我无法将值设置为 select 类型的输入。

$("#question_type").val("question_type");

上面的代码不起作用。

jQuery

//Edit OnClick- Question
$(".table-row td:not(:has(input))").on("click", function(){
  $('#editModal').modal('show');
  let rowId = $(this).closest('tr').attr('data-id');
  var test_id, question_type, question_name, option;

  $.ajax({
    url: "{% url 'edit_question' %}",
    type: 'GET',
    data: {"rowId" : rowId},
    dataType: 'json',
    success: function(data){
      test_id = data.question[0]['test_name'];
      question_name = data.question[0]['question_name'];
      question_type = data.question[0]['question_type'];
      if (question_type == 'QCM'){
        option = parseInt(data.question[1].length);
      }


      $(".question_name").val(question_name);
      //input of type text works fine.
      $(".question_type").val(question_type);
      $(".test_id").val(test_id);
      },
    });

$(".question_type").val(question_type); $(".test_id").val(test_id); //不将值设置到选择输入中

.html

<div class="modal fade" id="editModal" tabindex="-1" role="">
    <div class="modal-dialog modal-login" role="document">
        <div class="modal-content">
            <div class="card card-signup card-plain">
                <div class="modal-body">
                    <form class="form" method="POST" action="{% url 'edit_test' %}">
                        {% csrf_token %}
                        <h2>Edit Question</h2>
                        <div class="card-body">
                            <div class="form-group ">
                                <label>Test :</label>
                                <div class="input-group">
                                    {{questionForm.test_id}}
                                </div>
                            </div>
                            <div class="form-group ">
                                <label>Type :</label>
                                <div class="input-group">
                                    {{questionForm.question_type}}
                                </div>
                            </div>
                            <div class="form-group ">
                                <label>Question :</label>
                                <div class="input-group">
                                    {{questionForm.question_name}}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

forms.py

class QuestionForm(ModelForm):
        class Meta:
            model = Question
            fields = ['test_id','question_type','question_name']
        test_id = forms.ModelChoiceField(queryset=Test.objects.all(), empty_label=None, label='Test',
                widget=forms.Select(
                    attrs={
                        'id': "test_id",
                        'name': "test_id",
                        'title': 'Select a Test',
                        'class': 'selectpicker form-control test_id',
                        'data-style': 'btn btn-primary btn-sm',
                        'data-size': '7',
                    }
                )
        )
        question_type = forms.ChoiceField(choices = QUESTION_TYPE, initial='QCM',
                widget=forms.Select(
                    attrs={
                        'id': "question_type",
                        'name': "question_type",
                        'title': 'Select a Test',
                        'class': 'selectpicker form-control question_type',
                        'data-style': 'btn btn-primary btn-sm',
                        'data-size': '7',
                    }
                )
        )
        question_name = forms.CharField(label='Question', 
            widget=forms.TextInput(
                attrs={
                    'id': "question_name",
                    'name': "question_name",
                    'class': 'form-control question_name',
                    'placeholder': 'Add question here...',
                }
            )
        )

我已经搜索了许多解决方案，但没有一个可行。是什么导致错误？我该如何解决这个问题？谢谢。

Answer 1

在尝试了许多解决方案后，我意识到我无法将值设置到输入字段中，因为输入字段是使用引导选择创建的。使用 val() 设置值不会刷新 UI，因此我无法在浏览器上看到更改。

解决方案

$(".question_type").selectpicker('val', question_type);

我做了这个改变，现在一切正常！

了解更多 Bootstrap-select .selectpicker('val')