jQuery Selectbox to Textbox

Question

在改变国家之前

改变国家后

正如你在图片上看到的那样,我想用城市和城镇的文本框取代选择框取决于不断变化的国家.(我的国家只需要选择框.对于其他我需要文本框的国家.)

如果客户端更改国家/地区我将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的方法.)

但有一个问题.城镇取决于城市选择.通常,当城市发生变化时,我正在装载新城镇.但是在这个问题上.它不起作用.

在这种情况下代码失败.

1. 我改变了国家.
2. 我转回土耳其.
3. 我改变了城市到安卡拉,新的城镇从安卡拉装载.
4. 当我改变任何其他国家并转回土耳其.我可以把城市视为安卡拉.但城镇不是安卡拉的.城镇来自城市Nevşehir.

这是截图

这是冲突.

Answer 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将仅定位选择而不是文本字段.

小提琴

编辑城市变化

要解决此问题,只需重置城市上的城市和城镇变量即可change.

即: -

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

     //YOUR CODE FOR SETTING THE TOWNS HERE

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

看到这个小提琴

Answer 2

你有2个问题

1. html()只给你innerHTML一个元素,就是它里面的任何内容,而不是元素本身.在这种情况下,你只会获得<option>s.

2. 您的更改函数将调用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>

UPDATE

如果要保留事件处理程序等附加town并city选择,则不能使用,replaceWith()因为这将删除所有事件处理程序.正如文件所说:

.replaceWith()方法删除与已删除节点关联的所有数据和事件处理程序.

相反,您需要组合detach()删除元素但保留事件处理程序并after()在当前活动元素之后将输入/选择添加到DOM:

$(document).ready(function(){
    var city = $('#city');
    var town = $('#town');
  
    town.change(function() {
      $('#townResult').text($(this).val());
    });
  
    city.change(function() {
      $('#cityResult').text($(this).val());
    });

    $('#country').change(function(){
        var country = $(this).val();
        if(country != 'Türkiye')
        {
            // add the textboxes after the dropdowns, then detach the dropdowns
            $('#city').after('<input class="form-control" type="text" name="city" id="city">').detach();
            $('#town').after('<input class="form-control" type="text" name="town" id="town">').detach();
        }
        else
        {
            // add the dropdowns after the textboxes, then remove the textboxes
            $('#city').after(city).remove();
            $('#town').after(town).remove();
        }
    });
});

<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">Ankhara</option>
</select>

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

<div id="cityResult"></div>
<div id="townResult"></div>

Answer 3

您可以在容器内添加要替换的元素（div 或 span），然后根据您的要求将整个容器内容替换为所需的元素