Невозможно получить выбранное значение в форме 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 элементы формы не имеют всех правильных атрибутов.