0

我的问题如下。

我有一个 HTML 文件、一个 .XML 文件和一个 jQuery 文件。

在第一个中，我有两个选择标签，第一个是可见的，第二个是隐藏的。如果我选择具有该特定值的选项，则会出现第二个选择框，否则它将被隐藏。

在 xml 中包含我想在一个特定的选择框中显示的项目。

在 jQuery 文件中，我通过 Ajax 加载 xml，并附加到第一个选择必须包含某些特定节点的选项标签的 id。

我已经注意到，如果我在 HTML 中手动创建选项标签及其值，如果我使用 jQuery 搜索该值，它将起作用。相反，如果我将选项标签附加到 jQuery 选择 ID，那么选项标签将找不到它们的值。

这是简短的例子

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

我加载省项目并创建选项标签

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

那是价值吗？显示不是吗？隐藏

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

这行不通。

如果我用 HTML 说

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

然后它工作。

为什么？

谢谢。

4

2 回答 2

0

看起来您需要使用委托：

$(document).on('change','#selectProvincia', function (e) { 
    if( $('#test').val() == "TE") {
      alert('Ciao ciao.');
      $('#selectSede').show();
    }
    else{
      $('<p>Oh!</p>').hide();
    }         
  });
于 2013-06-09T15:37:02.567 回答
0

我认为这应该可以解决您的问题：http: //jsfiddle.net/R9MCT/1/

JS是：

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

我还添加#selectSede { display:none; }了使其在加载时隐藏。

于 2013-06-09T15:43:49.207 回答