Значение по умолчанию для раскрывающегося списка с JavaScript и JSON

Question

У меня есть поле City в моей форме, когда пользователь выбирает свою провинцию/государство, в раскрывающемся списке городов отображается выбранное состояние. Однако для списка городов нет значения по умолчанию, например «Выберите свой город». Я хочу добавить это значение.

Ниже мои 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; 
} 

Хотя следующий код создает поле Город на веб-интерфейсе в форме.

<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> 

Любая помощь и советы appreciated.I Я новичок в Javascript и JSON, так я с трудом, играя с ним.

EDIT:

Я попытался это:

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

этот код по умолчанию отображается перед тем, как выбрать город (i.e) установленное значение как «undefined» disabled selected.

'+ 'Выберите город' + convertJsonToHtml (data.responseText, это, selectedCity) + ''