javascript - 单击按钮后，获取所选选项的值

Question

我有一个按钮，可以打开模式并执行 ajax 来填充字段............

    $(document).on('click', '.renew', function(){
            var user_id3 = $(this).attr("id");
            $.ajax({
            url:"fetch.php",
            method:"POST",
            data:{user_id3:user_id3},
            dataType:"json",
            success:function(data)
            {
              $('#businessModal').modal('show');
              $('#requested_by').val(data.requested_by);
              $('#form_type').val(data.form_type);
              $('#bus_type').find('option[value="'+data.bid+'"]').prop('selected', true);   
            }
          })

        //the code that i tried
        var val = $('#bus_type').find(":selected").val();
        alert(value);
  });//END

我想在单击按钮后获取所选选项的值，但是在第一次单击按钮时，我始终获得的值是该按钮的第一个选项选择，但第二次单击时我已经获得了所选选项的值

//select option
 <label>Type of Business</label>
      <select class="form-control" name="bus_type" id="bus_type">
            <?php 
              foreach ($result as $value) {
                echo "<option value=".$value['id'].">".strtoupper($value['name'])."</option>";
              }
            ?>                   
      </select>

Answer 1

这是一个异步问题。您试图在 ajax 调用完成并选择一个选项之前获取所选选项，因此默认情况下第一个选项是“所选”选项。您需要像这样修改代码:

$(document).on('click', '.renew', function(){
        var user_id3 = $(this).attr("id");
        $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{user_id3:user_id3},
        dataType:"json",
        success:function(data)
        {
          $('#businessModal').modal('show');
          $('#requested_by').val(data.requested_by);
          $('#form_type').val(data.form_type);
          $('#bus_type').find('option[value="'+data.bid+'"]').prop('selected', true);   

          // this needs to be here
          var val = $('#bus_type').find(":selected").val();
          alert(value);
        }
      })

});//END