jquery ajax提交只提交第一个值

Question

我正在使用 jquery 和 ajax 提交表单。我有我的第一个选择菜单，根据这个选择菜单的值，包含不同菜单的 div 将变得可见。

 <table>
    <tr>
       <td>
          <select required="" class="input-medium" id="foulTypes" name="foul" data-original-title="" title="">
            <option value="">Select Foul</option>
            <option value="85">AID - Aiding Runner</option>
            <option value="1">BAT - Illegal Bat</option>
            <option value="2">BBW - Block Below Waist</option>
            <option value="3">BOB - Blocking Out of Bounds</option>
            <option value="4">CHB - Chop Block</option>
          </select>
        </td>
    </tr>
 </table
 <script>
     var foulTypes = $('#foulTypes');
     var select = this.value;
     foulTypes.change(function () {
        //We first disable all, so we dont submit data for more than 1 category
        $("#catDPI, #catILF, #catOPI, #catOH, #catDH, #catILD, #catUNS, #catUNR, #catTGT").hide().find(".category").attr("disabled", true);
        var $divSelectedCategory;
        if ($(this).val() == '1') {
            $divSelectedCategory = $("#catDPI");
            $('#catDPI').show();
        } else {
            $('#catDPI').hide();
        }

        if ($(this).val() == '85') {
          $divSelectedCategory = $("#catILF");
          $('#catILF').show();
        } else {
          $('#catILF').hide();
        }

        if ($(this).val() == '2') {
          $('#catOPI').show();
          $divSelectedCategory = $("#catOPI");
        } else {
          $('#catOPI').hide();
        }

        //We now enable only for the selected category        
        $divSelectedCategory.show().find(".category").attr("disabled", false).val('');
 });    
 </script>

  <div id="catDPI" style="display:none;">
      <select name="category" id="dpiCategory" class='category' style="width:210px;">
            <option value="Playing Through Receiver">Playing Through Receiver</option>
            <option value="arm bar">arm bar</option>
            <option value="Grabbing">Grabbing</option>
      </select>
  </div>

  <div id="catILF" style="display:none;">
     <select name="category" id="ilfCategory" class='category' style="width:210px;">
         <option value="">Select</option>
         <option value="moving">Moving</option>
         <option value="illegal">Illegal</option>
          <option value="standing">Standing</option>                                           
     </select>
  </div>

  <div id="catOPI" style="display:none;">
    <select name="category" id="opiCategory" class='category' style="width:210px;">
        <option value="">Select</option>
        <option value="restrict">Restrict</option>
        <option value="holding">Holding</option>
    </select>
  </div>

foulTypes .change 函数正在运行，并且正在显示正确的 div。我遇到的问题是提交表单时。如果#catDPI 可见，则可以正常提交类别菜单选择的值。如果#catILF 或#catOPI 可见，则类别的值为空白。我没有使用类别菜单的 ID。

  $("#submit-foul").submit(function(e){
    e.preventDefault();

    var category = $(".category").val();

    var dataString = 'category=' + category;

    if($("#submit-foul").valid()){
       $.ajax({
          url: 'myUrl',
          type: 'POST',
          success: function(data){
              if(data == 1){
                 alert('Success');
              };
          }
       });
     }
     return false;
  });

我不确定我做错了什么。是时候发给专家了！！我感谢您的所有帮助。

Answer 1

尝试更改函数“foulTypes”并在可见选择中添加类。

foulTypes.change(function () {
        //We first disable all, so we dont submit data for more than 1 category
        $("#catDPI, #catILF, #catOPI, #catOH, #catDH, #catILD, #catUNS, #catUNR, #catTGT").hide().find(".category").attr("disabled", true);
        var $divSelectedCategory;
        if ($(this).val() == '1') {
            $divSelectedCategory = $("#catDPI");
            $('#catDPI').show();
            $('#dpiCategory').addClass("visible");
        } else {
            $('#catDPI').hide();
            $('#dpiCategory').removeClass("visible")
        }

        .... CONTINUE

在你的 ajax 提交..

var category = $(".category.visible").val();