problems with choosing option value of a select appending the option tag to jquery

Question

my problem is the following.

I have an HTML file, a .XML file and a jQuery file.

In the first one i have two select tags, first of them is visible and the second is hidden. If i choose the option that have that specific value, the second select box will appear, else instead it will be hidden.

In the xml are contained the items that i want to show in one particular select box.

In the jQuery file i load the xml via Ajax and i append to the id of the first select the option tag that have to contain some specific nodes.

I've noted that if i manually create the option tags with their values in the HTML, if with jQuery i search for that value, it will work. If instead i append the option tags to the jQuery select id, then the option tag will not find their values.

This is the example in short

HTML

<select id="selectProvincia"></select>
<select id="selectSede"></select>

XML

<province>
  <provincia value="PE">Pescara</provincia>
  <provincia value="TE">Teramo</provincia>
  <provincia value="AQ">L'Aquila</provincia>
  <provincia value="CH">Chieti</provincia>
  <provincia value="AN">Ancona</provincia>  
</province>

jQuery

I load provincia items and i create option tags

$(xml).find('provincia').each(function(){
  var provincia = $(this).text();
  $("#selectProvincia").append("<option value='" + provincia + "'>" + provincia + "</option>");
});

Is that value? Show Isn't that? Hide

  $('#selectProvincia').bind('change', function (e) { 
    if( $('#test').val() == "TE") {
      alert('Ciao ciao.');
      $('#sedeSelect').show();
    }
    else{
      $('<p>Oh!</p>').hide();
    }         
  });

This doesn't work.

If i say in HTML

<select id="test">
  <option value="1">Hello World</option>
</select>

Then it works.

Why?

Thanks.

A. Wolff · Answer 1 · 2013-06-09T17:16:55.527

0

Looks like you need to use delegation:

$(document).on('change','#selectProvincia', function (e) { 
    if( $('#test').val() == "TE") {
      alert('Ciao ciao.');
      $('#selectSede').show();
    }
    else{
      $('<p>Oh!</p>').hide();
    }         
  });

edited Jun 09 '13 at 17:16

answered Jun 09 '13 at 15:37

A. Wolff

72,298
9
84
139

It works!! But what is a "delegation"? And, even if it's not the right topic, can i take a value and cast it as if would be a $_POST variable to use it in my DB? – Alessandro Violante Jun 09 '13 at 15:44
For delegation, read: http://stackoverflow.com/a/1688293/1414562 You can use it the same way than a classic binded event – A. Wolff Jun 09 '13 at 15:46
mmh... i think i have some problems... the code was working but i changed some thing that now i don't remember so it isn't working anymore and i can't catch why... $('#selectProvincia').bind('change','#selectProvincia',function (e) { if( $('#selectProvincia').val() == "TE") { alert('Ciao ciao.'); $('#selectSede').show(); } else{ $('
Oh!
').hide(); } }); was not the correct one? – Alessandro Violante Jun 09 '13 at 16:58
now nothing happens... $('#selectProvincia').on('change','#selectProvincia',function (e) { alert('Hello'); if( $(this).val() == "TE") { alert('Ciao ciao.'); } }); no alerts – Alessandro Violante Jun 09 '13 at 17:06
ya, you can send me money ;) What do you want to send? – A. Wolff Jun 09 '13 at 17:15
ahah... i wanted to send you my structure just because i can't catch the problem... and i think that previously it was the same but probably not... – Alessandro Violante Jun 09 '13 at 17:18
Mh the problem now is that if the val is TE it doesn't display me the alert so it would not display me the select too... – Alessandro Violante Jun 09 '13 at 17:24

score 0 · Accepted Answer · answered Jun 09 '13 at 15:43

0

I think this should solve your problem: http://jsfiddle.net/R9MCT/1/

The JS is:

var xml = '<province><provincia value="PE">Pescara</provincia><provincia value="TE">Teramo</provincia><provincia value="AQ">L\'Aquila</provincia><provincia value="CH">Chieti</provincia><provincia value="AN">Ancona</provincia></province>',
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc);


$xml.find('provincia').each(function () {
    var provincia = $(this).text(),
        value = $(this).attr('value');
    $("#selectProvincia").append("<option value='" + value + "'>" + provincia + "</option>");
});


$('#selectProvincia').on('change', function (e) {
    if ($(this).val() == "TE") {
        alert('Ciao ciao.');
        $('#selectSede').show();
    } else {
        $('#selectSede').hide();
    }
});

I also added #selectSede { display:none; } so that it's hidden on load.

answered Jun 09 '13 at 15:43

Joe

14,083
8
46
56

OP retrieves data from an ajax request. At time of you declare onchange handler, elements aren't in the DOM. He needs in his case to delegate event. – A. Wolff Jun 09 '13 at 15:48
I thought it was only the XML being loaded via ajax and `selectProvincia` was already on the page? – Joe Jun 09 '13 at 15:49
@AlessandroViolante - could you give any more details? You can remove the top three lines of my code and replace `$xml` with `$(xml)`, maybe that will work for you. – Joe Jun 09 '13 at 16:48
Ok it works but only if i parse all the xml document. So the only solution is to "attach" the entire schema in the xml variable if i want to use the schema without putting it to html? because i have a lot of selects and a lot of nodes – Alessandro Violante Jun 10 '13 at 09:08

problems with choosing option value of a select appending the option tag to jquery

2 Answers2