0

私の問題は次のとおりです。

HTML ファイル、.XML ファイル、および jQuery ファイルがあります。

最初のものには2つの選択タグがあり、最初は表示され、2番目は非表示になっています。その特定の値を持つオプションを選択すると、2 番目の選択ボックスが表示され、それ以外の場合は非表示になります。

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

これで問題は解決すると思います: 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 に答える