Appending select box

Question

I'm trying to add my select options into a select box when the user clicks an image. The image opens up a hidden search div containing the box. I have the following code:

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

});

The image class is .search, and the selectbox ID is #search_state. For some reason I can't get the selectbox to append, but the alert works onclick. Even when the box is hidden, its still listed under the source code. Does anyone know why I'm having this issue?

Your right.. Hmm.. Could it have something to do with using dropkick to style the selectbox? — Jack Sniper, Dec 26 '13 at 01:00
see http://stackoverflow.com/questions/8715358/how-to-reload-jquery-dropkick-object — Arun P Johny, Dec 26 '13 at 01:02

score 1 · Answer 1 · answered Dec 26 '13 at 00:50

could you try to fill selectes content istead of appending

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

    });

Still no luck, it might be something with the dropkick plugin I'm using — Jack Sniper, Dec 26 '13 at 01:00

score 1 · Accepted Answer · answered Dec 26 '13 at 01:06

1

If it is using dropkickthen call refresh method after changing the select programatically

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

answered Dec 26 '13 at 01:06

Arun P Johny

384,651
66
527
531

Guess all I had to do was call a refresh, thanks for the help! – Jack Sniper Dec 26 '13 at 01:19

Appending select box

2 Answers2