Question

我的问题如下。

我有一个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

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

$(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>

然后它有效。

为什么？

感谢。

Answer 1

看起来你需要使用委托：

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

Answer 2

我认为这可以解决您的问题：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; }，以便在加载时隐藏它。

选择将选项标签附加到jquery的选项的选项值的问题

2 个答案: