无法以 jQuery 形式获取选择值

Posted 2023-05-09

【中文标题】无法以 jQuery 形式获取选择值

【英文标题】：Can't get select value in jQuery form

【发布时间】：2020-07-11 02:32:54

【问题描述】：

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

这是我的代码：

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

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

【问题讨论】：

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

$$('select[name=subjects]').val(); 是什么，这是错字吗？

【参考方案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 表单元素没有所有正确的属性。

【讨论】：

非常感谢。你的代码真的很干净，但我正在尝试以弹出模式形式显示我的表单。

@Sijran 应该没有什么不同。你也没有在你的帖子中提出这一点；因此我要求一个最小的、可重现的例子。