Question

我正在尝试在用户点击图片时将我的选择选项添加到选择框中。该图像打开一个包含该框的隐藏搜索div。我有以下代码：

HTML

<select id="search_state" name="state" class="large">

</select>

jquery的

$(document).ready(function(){

  $('.search').click(function() {
    $('#search_state').append('<optgroup label="Chile"><option value="907">Región Metropolitan</option></optgroup><optgroup label="China"><option value="1355">Guangdong</option><option value="1353">Hainan</option><option value="1341">Jiangsu</option><option value="1307">Shanghai</option></optgroup><optgroup label="Costa Rica"><option value="1037">Alajuela</option><option value="1041">Guanacaste</option><option value="1043">Heredia</option><option value="1047">Puntarenas</option><option value="1049">San José</option></optgroup>');
    alert("works");
  });

});

图像类是.search，选择框ID是#search_state。出于某种原因，我无法让选择框附加，但警报可以在onclick上运行。即使该框被隐藏，它仍然列在源代码下。有谁知道我为什么会遇到这个问题？

Answer 1

您可以尝试填充所选内容而不是附加

$(document).ready(function(){

      $('.search').click(function() {
        $('#search_state').html('<optgroup label="Chile"><option value="907">Región Metropolitan</option></optgroup><optgroup label="China"><option value="1355">Guangdong</option><option value="1353">Hainan</option><option value="1341">Jiangsu</option><option value="1307">Shanghai</option></optgroup><optgroup label="Costa Rica"><option value="1037">Alajuela</option><option value="1041">Guanacaste</option><option value="1043">Heredia</option><option value="1047">Puntarenas</option><option value="1049">San José</option></optgroup>');
        alert("works");
      });

    });

Answer 2

如果正在使用dropkick，则在以编程方式更改选择后调用refresh方法

$('#search_state').dropkick('refresh')

添加选择框

2 个答案: