4

国のリストと各国の都市のリストがあります。両方をドロップダウンリストとして設定しました。

私の問題は、選択した国が変更されたときにリストされている都市を変更するにはどうすればよいですか?

これは私のXMLコードです:

<field name="country_id" type="sql" class="country" label="Country"
       description="Country" required="true"
       query="SELECT id, title FROM #__destination_countries WHERE state = 1"
       key_field="id" value_field="title" filter="raw">
</field> 

<field name="city_id" type="sql"
       query="SELECT id, title FROM #__destination_cities WHERE state = 1"
       key_field="id" value_field="title" class="city" label="City"
       description="City" required="true" filter="raw">
</field>

Ajax コード:

jQuery(document).ready(function($) {
    $(".country").change(function(){
        country_id = $("#" + this.id).val();
        $.ajax({
            url:'index.php?option=com_destination&task=cities.getListCities',
            type: "POST",
            data: {
                'country_id': country_id
            }
        }).done(function(msg) {
            console.log(msg);
            $(".city").html(msg);

        })
    })
});

これは私のサーバー側のコードです

public function getListCities()
{
    $country_id = JRequest::getInt('country_id', 0);
    $model = $this->getModel();
    $model->setState('filter.country_id', $country_id);
    $items = $model->getItems();
    $option = array();
    foreach ($items as $key => $item) {
        $option[] = "<option value='{$item->id}'>{$item->title}</option>";
    }
    $return = implode("", $option);
    echo $return;
    exit;
}

しかし、それは私が望むように表示されませんでした、それはこのように表示されます

<select style="display: none;" required="required" id="jform_city_id" name="jform[city_id]" class="city required chzn-done">
    <option value="1">City 1 of Coutry 1</option>
</select>
<div style="width: 220px;" class="chzn-container chzn-container-active" id="jform_city_id_chzn">
    <a tabindex="-1" href="javascript:void(0)" class="chzn-single chzn-single-with-drop">
        <span>City 1 of Coutry 1</span>
        <div><b></b></div>
    </a>
    <div class="chzn-drop" style="display: block; width: 218px; top: 24px;">
        <div class="chzn-search"><input tabindex="-1" style="width: 183px;" autocomplete="off" type="text"></div>
        <ul class="chzn-results">
            <li id="jform_city_id_chzn_o_0" class="active-result" style="">City 1 of Coutry 1</li>
            <li id="jform_city_id_chzn_o_1" class="active-result result-selected" style="">City 2 of Coutry 1</li>
        </ul>
    </div>
</div>

選択オプションを変更するだけで、以下は変更しませんでした。

4

1 に答える 1

6

注意は別として、使用JRequest::getInt();すべき場所で非推奨を使用しています

$input = JFactory::getApplication()->input;
$country_id = $input->getInt('country_id', 0);

2 番目の選択を変更するには、2 番目の選択の更新をトリガーする必要があります。

$(".country").change(function(){
    // your ajax call from your code

    // on success, you need to trigger the second select by using
    $(".city_id").val(your_value_from_ajax_response).trigger("liszt:updated");

});
于 2013-03-13T13:14:57.917 に答える