添加选择框

时间:2013-12-26 00:47:35

标签: jquery drop-down-menu append

我正在尝试在用户点击图片时将我的选择选项添加到选择框中。该图像打开一个包含该框的隐藏搜索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上运行。即使该框被隐藏,它仍然列在源代码下。有谁知道我为什么会遇到这个问题?

2 个答案:

答案 0 :(得分: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");
      });

    });

答案 1 :(得分:1)

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

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