Question

我有以下选择html：

<div class="form-group col-lg-6 row">
   {{ Form::select( 'state',array( 0 => '' ),null, array( 'class' => 'form-control', 'data-placeholder' => 'State','id' => 'state' ) ) }}
</div>

或

<select class="form-control" id="state" data-placeholder="Selecione">
</select>

我想在JQuery中使用以下代码填充Bootstrap + Chosen：

$(document).ready( function () {
            var token = $('#token').val();
            var estados = $('#state');

            $.ajax({
                url : './estados',
                dataType : 'json',
                type : 'post',
                data : {
                    _token : token
                },
                success : function ( data ) {

                    estados.find('option').remove();
                    estados.append( $('<option>').val( 0 ).text( '' ));
                    //console.log( data );
                    $.each(data, function (i, j) {
                        console.log( j.sigla+" "+j.descricao );
                        var option  = $('<option>').val( j.sigla ).text( j.descricao ) ;
                        estados.append( option );
                    });
                    estados.trigger('chosen:updated');
                }
            });
        });

但是没有用。如果我查看console.log成功显示数据。

在PHP我可以填充，但我想使用laravel。

[编辑1 ]

数据的结果是：

AC Acre
AL Alagoas
AP Amapá
AM Amazonas
BA Bahia
CE Ceará
DF Distrito Federal
ES Espírito Santo
GO Goiás
MA Maranhão
MT Mato Grosso
MS Mato Grosso do Sul
MG Minas Gerais
PA Pará
PB Paraíba
PR Paraná
PE Pernambuco
PI Piauí
RJ Rio de Janeiro
RN Rio Grande do Norte
RS Rio Grande do Sul
RO Rondônia
RR Roraima
SC Santa Catarina
SP São Paulo
SE Sergipe
TO Tocantins

Answer 1

我认为这可以作为选择2的所有基于laravel的ajax人口的解决方案。总结：

为ajax返回值创建路由
创建一个从数据库/枚举等获取数据的控制器
将通用选择列表项（模型）返回到视图中的填充
使用选择模型创建局部视图，然后可以将其与多个项目一起使用。
创建ajax调用以获取相关数据
使用ajax响应填充dom并在其上应用select2。
（可选）创建刷新方法以从数据库重新加载项目

以下是所有相关代码及解释。

我将从在laravel中为ajax调用创建的路径开始，因此它被定义为这样

//DropDowns
Route::group([
'prefix'=>'dropdown',
],function(){
    Route::get('/myObject/{selectedID?}/{terid?}/{sID?}',['as'=>'countryDropdown','uses'=>'Widgets\DropDownsController@myObjects']);
    Route::get('/states/{selectedID?}/{regid?}/{sID?}',['as'=>'stateDropdown','uses'=>'Widgets\DropDownsController@states']);
});

你可以有不同的结构，但我更喜欢在一个控制器中保留下拉列表，因为它们只有4/5，可以轻松重复使用和记忆。这不是一个很难的规则。

然后你创建你的控制器以发送json。

public function states($selectedID=0,$regid=null,$sID='stateSelect',$sClass='stateSelect',$sName='stateSelect',$optClass='state',$single=true)
{
    $dropdownhelper = new DropDownModel();
    $branches = $dropdownhelper->getStates($regid); //This contains database logic to obtain states etc
    $returnObject = $dropdownhelper->getObjectfromArray($branches, $selectedID, $sID, $sClass, $sName, $optClass);
    //return response()->json($returnObject);
    return view('layouts.twitterbootsrapshared._singleSelect',$returnObject);
}

这些获取状态的方法在模型中设置，例如，以获得可以拥有的状态

// Get states method is like this
public function getStates($countryID = null)
{
    $branches = [];
    try {
        if($countryID==null)
        {
            //Obtain All States
            $states = DB::select('SELECT id,name FROM states ORDER BY name ASC');
        }
        else
        {
            $states = DB::select('SELECT id,name FROM states WHERE country_id = '.$countryID.' ORDER BY name ASC');
        }

    } catch (Exception $e) {
        //Log that we are not able to obtain States
    }
    return $states;
}

我使用下拉模型来获取我将用于填充它的下拉对象。这是一种简单的方法，可以使用参数并将其转换为准备好进行查看的对象。

/// DropdownModel has getObjectfromArray method like this
public function getObjectfromArray($arrayofElements,$selectedID=0,$selectID='',$selectClass='',$selectName='',$optionClass='')
{
    $returnobject = [
        'selectItems'=>$arrayofElements,
        'selectedID'=>$selectedID,
        'selectID'=>$selectID,
        'selectClass'=>$selectClass,
        'selectName'=>$selectName,
        'optionClass'=>$optionClass
    ];
    return $returnobject;
}

我的视图是在layouts文件夹下的twitterbootstrapshared文件夹中的共享视图，您可以从控制器调用中看到它在那里获取模型并获得这样的视图

<select id="{{$selectID}}" class="{{$selectClass}}" name="{{$selectName}}">
  @foreach ($selectItems as $option)
    <option class="{{$optionClass}}" data-key="{{$option->id}}" data-name="{{$option->name}}"@if ($selectedID==$option->id) selected="selected" @endif value="{{$option->id}}">{{$option->name}}</option>
  @endforeach
</select>

接下来，当我需要在客户端的任何地方调用此下拉列表时，这包含您问题的实际答案。

var getStates = function(){
    var selectedID = $('#stateSelect option:selected').data('key');
    if(!selectedID){selectedID=0;}
    // I have another dropdown for selected country first but if you dont have you can ignore this. and pass nothing.
    var selectedCountryID = $('#countrySelect option:selected').data('key');
    if(!selectedCountryID){selectedCountryID=0;}
    // Here i prepare what i need to send to ajax call
    dataToSend={
        'selectedID':selectedID,
        'countryid':selectedCountryID==0?null:selectedCountryID,
        'sID':"stateSelect",
    };
    // This is simple get request to that defined route
    $.get('{{route('stateDropdown')}}',dataToSend,function(data){
            if(data){
                $('.stateContainer').html(data);
                // Once obtained I will call select2 to populate it with data. 
                $('#stateSelect').select2({
                    placeholder:"Select a State",
                    width:'100%',
                });
            }
        });
};
getStates();

我在网页上的html是这样的，以防你需要知道ID等在哪里

             <div class="form-group">
                <label class="control-label col-sm-2 font-noraml">States</label>
                <div class=" col-sm-6 statesContainer">
                </div>
                <div class="col-sm-2"><button class="btn btn-sm btn-primary"><i class="fa fa-refresh refreshStates" title="Reload States"></i></button></div>
            </div>

我在下拉列表旁边给出了一个刷新按钮，以防万一用户可以按刷新再次获取状态。 refesh按钮的代码是这个

$('.refreshState').on('click',function(){ getStates(); });

我遵循一些假设和命名惯例，但您可以按照自己的方式独立完成。

使用JQuery

1 个答案: