Question

在下拉选项中，我想收听并获取用户选择的选项的值。

然后，我想将此值传递给PHP变量，以在刀片视图PHP脚本的后面部分中使用。

我不想重新加载页面，因此从在线外观来看，我发现ajax是唯一可能的方法。

我尝试实现如下所示的方法，但是在提交页面加载时遇到障碍。

有一个更好的选择选项下拉框，您无需提交即可获得所选值吗？

我的选择选项代码：

<form id="myForm">
    <div class="button dropdown">
      <select name="languageSelected" required="required" id="languageselector" onChange='showSelected(this.value)'>
        <option value="">Pick A language</option>
        @foreach($reviewForm_language as $lang)
         <option value="{{$lang->id}}">{{$lang->name}}</option>
        @endforeach
      </select>
    </div>
    <input id="ajaxSubmit" type="submit" value="Select"/>
</form>

我的JS代码：

<script>
     jQuery(document).ready(function(){
        jQuery('#ajaxSubmit').click(function(e){
           e.preventDefault();
           $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
              }
          });
           jQuery.ajax({
              url: "{{ url('#') }}",
              method: 'post',
              data: {
                 id: jQuery('#languageSelected').val(),

              },
              success: function(result){
                 jQuery('.alert').show();
                 jQuery('.alert').html(result.success);
              }});
           });
        });
  </script>

重新加载后，我可以将值作为GET请求获得，如下所示；但是，我不想重新加载页面，但是由于某些原因它确实会重新加载。

 `<?php
      $langId = request()->get('languageSelected');
  ?>`

有人吗？

Answer 1

尝试一下-

更改type =“ button”而不是提交

input id =“ ajaxSubmit” type =“ button” value =“ Select”

2。不需要$.ajaxSetup。从$.ajaxSetup复制标题，并移至url（jQuery.ajax({内）上方

您正在正确地做其他事情。现在，只需使用var_dump（id）

$request->all()

Answer 2

代替输入类型，将其更改为按钮

<input id="ajaxSubmit" type="button" value="Select"/>

在php文件中，您持有的ID并非languageSelected，因为您已将ID传递给ajax调用中的数据。

 `<?php
  $langId = request()->get('id');
 ?>`

Answer 3

您想要直接收听select元素上的change事件的声音。

<script>    
    jQuery('#languageselector').on('change', function(){      

        jQuery.ajax({
          url: "{{ url('#') }}",
          method: 'post',
          data: {
             id: $(this).val(),
          },
          success: function(result){
             jQuery('.alert').show();
             jQuery('.alert').html(result.success);
          }
        });

    });
</script>

Ajax调用以获取从HTML选择选项中选择的值

3 个答案: