带有 JavaScript 和 JSON 的下拉列表的默认值

Question

当用户选择他的省/州时，我的表单中有一个城市字段，根据所选州显示城市的下拉列表。但是对于城市列表，没有像“选择您的城市”这样的默认值。我想添加这个值。

下面是我的 field.js：

function getAjaxReqest(action, selectCountry, stateId, normalImput,selectedCity) {
    var request = new Ajax.Request(action,
        {
            method: 'GET',
            onSuccess: function (data) {
                $('billing:city').replace('<select id="billing:city" name="billing[city]" class="required-entry">' +
                '<option value=""></option>' + convertJsonToHtml(data.responseText, this,selectedCity) +
                '</select>');
            },
            onFailure: $('billing:city').replace(normalImput),
            parameters: {city_id: stateId, country_id: selectCountry}
        }
    );
}



function getAjaxReqestCustomer(action, selectCountry, stateId, normalImput, selectedCity) {
    var request = new Ajax.Request(action,
        {
            method: 'GET',
            onSuccess: function (data) {
                $('city').replace('<select id="city" name="city" class="required-entry">' +
                '<option value=""></option>' + convertJsonToHtml(data.responseText, this, selectedCity) +
                '</select>');
            },
            onFailure: $('city').replace(normalImput),
            parameters: {city_id: stateId, country_id: selectCountry}
        }
    );
}
function getAjaxReqestShip(action, selectCountry, stateId, normalImput,selectedCity) {
    if (normalImput != null) {
        var resetShip = true;
    } else {
        var resetShip = false;
    }

var request = new Ajax.Request(action,
    {
        method: 'GET',
        onSuccess: function (data) {
            $('shipping:city').replace('<select id="shipping:city" name="shipping[city]" class="required-entry">' +
            '<option value=""></option>' + convertJsonToHtml(data.responseText, this,selectedCity) +
            '</select>');
        },
        onFailure: function (resetShip) {
            if (resetShip) {
                $('shipping:city').replace(normalImput)
            }
        },

        parameters: {city_id: stateId, country_id: selectCountry}
    }
);
}

function convertJsonToHtml(data, ship, selectedCity) {

var jsonData = data.evalJSON();

if (jsonData.length == 0) {
    ship.replace(normalImput);
    return;
}

console.log(jsonData);

htmlData = '';

jsonData.each(function (item) {
    if (item.cityname == selectedCity) {
        htmlData += '<option value="' + item.cityname + '" selected>' + item.cityname + '</option>';
    } else {
        htmlData += '<option value="' + item.cityname + '">' + item.cityname + '</option>';
    }

});

return htmlData;
}

虽然下面的代码会在表单的前端生成 City 字段。

    <div class="input-box">
    <input type="text" title="<?php echo $this->__('City') ?>"                 name="billing[city]"
        value="<?php echo $this->escapeHtml($this->getAddress()->getCity()) ?>"
        class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('city') ?>"
           id="billing:city"/>
    </div>

感谢任何帮助和提示。我是 Javascript 和 JSON 的新手，所以我很难使用它。

编辑：

我试过这个：

div class="input-box">
<input type="text" title="<?php echo $this->__('City') ?>" name="billing[city]"
 value="<?php echo $this->escapeHtml($this->getAddress()->getCity()) ?>"
class="input-text <?php echo $this->helper('customer/address')-    >getAttributeValidationClass('city') ?>"
id="billing:city"/>
<select name="anything"><option value="undefined" disabled="selected">Select your city</option></select>
</div>

这可行，但会在城市字段下方添加文本“选择您的城市”而不是在其中。

Answer 1

在选择城市之前使用此代码作为默认显示（即）将值设置为“未定义”禁用选中。

' + '选择你的城市' + convertJsonToHtml(data.responseText, this, selectedCity) + ''