无法以 jQuery 形式获取选择值

Question

我制作了一个带有两个下拉选择框的模态表单。单击第一个选择框时，我创建了另一个依赖于第一个选择的选择选项。单击保存按钮时，我想保存第一个选项和第二个选项。但无法获得第二个选项。

这是我的代码：

$('#btnSave').click(function(){
            var url = $('#myForm').attr('action');
            var data = $('#myForm').serialize();
            var subjects = $('select#subs option:selected').val(); 
                var result = '';
            alert (data);

                $.ajax({
                    type: 'ajax',
                    method: 'post',
                    url: url,
                    data: data,
                    async: false,
                    dataType: 'json',
                    success: function(response){
                        //alert ("here");
                        if(response.success){
                            $('#myModal').modal('hide');
                            $('#myForm')[0].reset();
                            if(response.type=='add'){
                                var type = 'added'
                            }else if(response.type=='update'){
                                var type ="updated"
                            }
                            $('.alert-success').html('Subject '+type+' successfully').fadeIn().delay(4000).fadeOut('slow');
                            showAllTeachers();
                        }else{
                            alert('Error');
                        }
                    },
                    error: function(){
                        alert('Could not add data');
                    }
                });
            //});
        });

        $('#cls').change(function(){
        var classes  = $('#cls option:selected').val(); 
        $.ajax({
                type: 'ajax',
                method: 'post',
                url: '<?php echo base_url() ?>index.php/teacher/load_subjects',
                data: {class_id:classes},
                async: false,
                dataType: 'json',
                success: function(data){
                    //alert(data);
                    var html = '<option value="">Select Subject</option>';
                    var i;
                    for(i=0; i<data.length; i++){

                        html +='<option'+
                                    ' value= "'+data[i].subject_id+'">'+data[i].subject_name+'</value>'+
                                '</option>';
                    }
                    $('#subs').html(html);
                }
            });

        });



    //edit
    $('#showdata').on('click', '.assign-subject', function(){
        var id = $(this).attr('data');

        $('#myModal').modal('show');
        $('#myModal').find('.modal-title').text('Assign Subject');
        $('#myForm').attr('action', '<?php echo base_url() ?>index.php/teacher/update_teacher');
        $('input[name=teacher_id]').val(id) ;   
        var subjects = $$('select[name=subjects]').val();//('select#subs option:selected').val(); 
        $.ajax({
            type: 'ajax',
            method: 'post',
            url: '<?php echo base_url() ?>index.php/teacher/update_teacher',
            data: {id: id, classes: classes, subjects: subjects},
            async: false,
            dataType: 'json',
            success: function(data){

                $('select[name=subjects]').val();
                alert("In edit");

            },
            error: function(){
                alert('Could not Edit Data');
            }
        });
    });

另外，保存后我想清除表单选择值。我该怎么做？

Answer 1

考虑下面的代码。

$(function() {
  var options = [
    [{
      label: "Select Header",
      val: ""
    }, {
      label: "Opt A",
      val: "a"
    }, {
      label: "Opt B",
      val: "b"
    }, {
      label: "Opt C",
      val: "c"
    }],
    [{
      label: "Select Subject",
      val: ""
    }, {
      label: "Opt D",
      val: "d"
    }, {
      label: "Opt E",
      val: "e"
    }, {
      label: "Opt F",
      val: "f"
    }],
    [{
      label: "Select Topic",
      val: ""
    }, {
      label: "Opt G",
      val: "g"
    }, {
      label: "Opt H",
      val: "h"
    }, {
      label: "Opt I",
      val: "i"
    }]
  ];

  function updateOptions(trg, data) {
    trg.html("");
    $.each(data, function(k, item) {
      $("<option>", {
        value: item.val
      }).html(item.label).appendTo(trg);
    })
  }

  function clearOptions(trg) {
    trg.html("");
    trg.hide();
  }

  $("#select-1").change(function() {
    var sel = parseInt($(this).val());
    if (isNaN(sel)) {
      return false;
    }
    updateOptions($("#select-2"), options[sel]);
    $("#select-2").parent().fadeIn();
  });

  $("#select-2").change(function() {
    $("#myForm button[type='submit']").prop("disabled", false);
  });

  $("#myForm").submit(function(e) {
    e.preventDefault();
    var myData = $(this).serialize();
    console.log(myData);
    $(this)[0].reset();
    clearOptions($("#select-2"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label>Select Option: </label>
  <select id="select-1" name="select-option-1">
    <option></option>
    <option value="0">Header</option>
    <option value="1">Subject</option>
    <option value="2">Topic</option>
  </select>
  <span class="hidden-select" style="display: none;">
    <select id="select-2" name="select-option-2">
    </select>
  </span>
  <br />
  <button type="submit" disabled="disabled">Save</button>
</form>

由于您没有在帖子中提供 HTML，我不得不猜测您的脚本为什么不起作用。 .serialize() 使用 Name 属性，所以我首先怀疑您的 HTML 表单元素没有所有正确的属性。