Подтвердить что ты не робот

JQuery Выберите в текстовое поле

Перед изменением страны

введите описание изображения здесь

После смены страны

введите описание изображения здесь

Как вы видели на снимках, которые я хочу заменить selectbox с текстовым полем для города и города, зависит от меняющейся страны. (Мне нужно selectbox только в моей стране. Для других стран мне нужен текстовый ящик.)

Если страна изменения клиента меняет selectbox на текстовое поле. Все хорошо. Но если клиент хочет отменить выбор старой страны, мне нужно перезагрузить город и город как selectbox. Но он не работает

Что мне делать?

Вот мой файл jquery.

<script type="text/javascript">
    $(document).ready(function(){
        var city = $('#city').html();
        var town = $('#town').html();

        $('#country').change(function(city, town){
            var country = $(this).val();
            if(country != 'Türkiye')
            {
                $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
                $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
            }
            else
            {
                $('#city').replaceWith(city);
                $('#town').replaceWith(town);
            }
        });
    });
</script>

ОБНОВЛЕНИЕ: Я почти готов. (Я использовал метод @Rhumborl.)

Но есть проблема. Город зависит от выбора города. Обычно, когда меняются города, я загружаю новые города. Но в этом вопросе. Он не работает.

В этом случае код не работает.

  • Я сменил страну.
  • Я повернул назад Турцию.
  • Я сменил город на Анкару, новые города загружаются из Анкары.
  • Когда я изменил другую страну и вернусь в Турцию. Я вижу город как Анкару. Но города не являются Анкарой. Города происходят от города Невшехир.

Вот скриншот

введите описание изображения здесь

Это конфликт.

4b9b3361

ОТВЕТЫ

Ответ 1

попробуйте следующее: -

  $(document).ready(function(){
        var city = $('#city');
        var town = $('#town');

        $('#country').change(function(){

            var country = $(this).val();
            if(country != 'Türkiye')
            {
                $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
                $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
            }
            else
            {
                $('#city').replaceWith(city);
                $('#town').replaceWith(town);
            }
        });
    });

удалите .html(), поскольку он получает содержимое внутри элемента и удаляет параметры city и town в функции.

ИЗМЕНИТЬ

Если у вас есть обработчики событий, привязанные к city и town, выполните следующие действия: -

$(document).on('change', 'select#city', function(){

$(document).on('change', 'select#town', function(){

таким образом события на выбранных вами изначально потерях будут по-прежнему работать по мере необходимости. select#city будет использоваться только для выбранного, а не текстового поля.

Fiddle

РЕДАКТИРОВАТЬ ИЗМЕНЕНИЕ ГОРОДА

Чтобы исправить это, просто reset переменные города и города в городе change.

а именно: -

$(document).on('change', '#city', function(){

     //YOUR CODE FOR SETTING THE TOWNS HERE

     // RE-SET CITY AND TOWN
     city = $('#city');
     town = $('#town');
 });

Смотрите Fiddle

Ответ 2

У вас есть 2 вопроса

  • html() предоставляет только innerHTML элемента, то есть любого содержимого внутри него, а не самого элемента. В этом случае вы получите только <option> s.

  • Ваша функция изменения принимает 2 параметра с именем city и town, которые переопределяют ссылки на созданные вами переменные. Поскольку этой функции будет предоставлен объект события jQuery, вы заменяете текстовые поля на неправильные вещи.

Чтобы исправить проблему 1, вы можете просто удалить часть .html() и просто сохранить city и town как объекты jQuery, содержащие исходные элементы.

Чтобы исправить проблему 2, просто удалите параметры city и town из вашей функции.

Итак, ваш код может выглядеть так:

$(document).ready(function(){
    var city = $('#city');
    var town = $('#town');

    $('#country').change(function(){
        var country = $(this).val();
        if(country != 'Türkiye')
        {
            $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
            $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
        }
        else
        {
            $('#city').replaceWith(city);
            $('#town').replaceWith(town);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="country">
  <option value="Türkiye">Turkey</option>
  <option value="UK">United Kingdom</option>
  <option value="USA">USA</option>
</select>

<select id="city">
  <option value="Izmir">Izmir</option>
  <option value="Ankhara">Ankha`enter code here`ra</option>
</select>

<select id="town">
  <option value="Merkez">Merkez</option>
</select>

Ответ 3

Вы можете добавить элемент, который вы хотите заменить внутри контейнера (div или span), а затем заменить весь контент контейнера на необходимый элемент в зависимости от ваших требований.

Ответ 4

Вы можете использовать html-шаблоны:

<script type="text/html" id="textbox-template"><!-- Your textbox here --></script>

<script type="text/html" id="selectbox-template"><!-- Your selectbox here --></script>

С помощью jQuery загрузите содержимое соответствующего шаблона в зависимости от выбранной страны.

Если вы не хотите сохранять и повторно отображать выбранные значения, вы можете сохранить текущее текстовое поле или выбрать html в соответствующем шаблоне.

Ответ 5

Ты почти прав. Просто вам нужно заменить эти три строки кода.

Код (перед заменой):

var city = $('#city').html();
        var town = $('#town').html();

        $('#country').change(function(city, town){

Замените это (после замены):

var city = $('#city');
        var town = $('#town');

        $('#country').change(function(){

Ответ 6

Другое предлагаемое решение. Это один из названий городов, полученных от AJAX.

Возвращенный список названия города издевается (жестко закодирован), чтобы имитировать реальное состояние. Вы должны изменить код ниже // FIXME: list of town should be acquired from server.. Измените переменную townList на список города, приобретенного с сервера.

Оформить мой ответ на jsfiddle

PS: здесь я не включаю код, потому что здесь нельзя переписывать запрос/ответ AJAX.

Ответ 7

Пожалуйста, найдите мое предложенное решение ниже. Предполагая, что названия городов жестко закодированы, а не из ответа AJAX, я добавил массив городских значений и названий, соответствующих городам.

Вы также можете проверить тот же фрагмент на jsfiddle.

$(document).ready(function() {
  var city = $('#city');
  var town = $('#town');
  $('#country').change(function() {
    var country = $(this).val();
    if (country != 'Türkiye') {
      $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
      $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
    } else {
      $('#city').replaceWith(city);
      $('#town').replaceWith(town);
    }
  });
  // Need to attach event handlers to newly inserted city & town options
  $(document).on('change', '#city', function() {
    var city = $(this).val();
    // Clear town options 
    $("#town").html("");
    // Then append town names based on selected city
    for (var i = 0; i < towns[city].length; i++) {
      $("#town").append("<option value='" + towns[city][i].val + "' >" + towns[city][i].label + "</option>");
    }
  });
  // Town names. Assuming town names are hard coded, correspond to city name.
  // Note: value of town names in HTML has been changed to number based value (0 & 1)
  var towns = [
    [{
      val: "merkez",
      label: "Merkez"
    }, {
      val: "izmirtowna",
      label: "Izmir Town A"
    }],
    [{
      val: "ankharatowna",
      label: "Ankhara Town A"
    }, {
      val: "ankharatownb",
      label: "Ankhara Town B"
    }]
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- begin snippet: js hide: false -->
<select id="country">
  <option value="Türkiye">Turkey</option>
  <option value="UK">United Kingdom</option>
  <option value="USA">USA</option>
</select>
<select id="city">
  <option value="0">Izmir</option>
  <option value="1">Ankhara</option>
</select>
<select id="town">
  <option value="Merkez">Merkez</option>
  <option value="izmirtowna">Izmir Town A</option>
</select>