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的方法。）

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

在这种情况下代码失败。

我改变了国家。
我转回土耳其。
我改变了城市到安卡拉，新城镇从安卡拉装载。
当我改变任何其他国家并转回土耳其。我可以把城市视为安卡拉。但城镇不是安卡拉的。城镇来自城市内夫谢希尔。

这是截图

这是冲突。

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只会定位选择而不是文本字段。

Fiddle

编辑城市变更

要解决此问题，只需重置城市change上的城市和城镇变量。

即： -

$(document).on('change', '#city', function(){ //YOUR CODE FOR SETTING THE TOWNS HERE // RE-SET CITY AND TOWN city = $('#city'); town = $('#town'); });

请参阅此Fiddle

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

<强>更新

如果要将事件处理程序等附加到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）中添加要替换的元素，然后根据需要将所有容器内容替换为所需元素

Answer 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保存在相应的模板中。

Answer 5

你几乎是对的。只需要替换这三行代码。

代码（替换前）：

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

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

替换为此（替换后）：

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

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

Answer 6

另一个提出的解决方案。这是从AJAX获得的城镇名称列表。

返回的城镇名称列表被模拟（硬编码）以模仿真实情况。您应该更改// FIXME: list of town should be acquired from server.下方的代码。使用从服务器获取的城镇列表更改townList变量。

在jsfiddle
上查看我的答案

PS：我这里没有包含代码，因为这里无法模仿AJAX请求/响应。

Answer 7

请在下面找到我提出的解决方案。假设城镇名称是硬编码的，而不是来自AJAX响应，我添加了城镇价值阵列和姓名对应城市。

您还可以在jsfiddle上查看相同的代码段。

＆＃13;

$(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"
    }]
  ];
});

＆＃13;

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

＆＃13;

jQuery Selectbox to Textbox

7 个答案: