0

私がやりたいこと：i）XMLデータを選択オプションフィールドに解析しますii）ユーザーがオプションボックスを使用して選択を行うと、ユーザーの選択に基づいて、さらに多くのフォームフィールドに関連するXMLデータが入力されます。

私はこれをAdobeSpryで使用しています（あなたが泣いているのは何ですか!!!）-現在、ユーザーはXMLからのデータを含むオプションボックスを選択します。たとえば、「American Wigeon」を選択すると、他のフォームフィールドに「Turdusmigratorius」などの残りのXML。ユーザーが気が変わって別の鳥、たとえば「American Robin」を選択すると、この鳥に関連するXMLがフォームフィールドに入力されます。

解析されたデータを選択オプションに取り込むための答えをここで見つけましたが、複数のフィールドを使用する次のビットを理解することはできません。

私のXMLファイルは次のようになります（2つのエントリに編集されていますが、通常は約300です）。

<?xml version="1.0" encoding="utf-8" ?>
<BIRD>

<Result>
<name>American Wigeon</name>
<latin>Anas americana</latin>
<rare>1</rare>
<id>68</id>
<breed>0</breed>
<winter>0</winter>
</Result>

<Result>
<name>American Robin</name>
<latin>Turdus migratorius</latin>
<rare>1</rare>
<id>255</id>
<breed>0</breed>
<winter>0</winter>

</BIRD>

これをjQueryで機能させて、スクリプトに機能を追加できるようにしたいと思います。

どんな助けでも本当にありがたいです。

どうもありがとう

マーク

更新日を編集：

私はCharlietfiによって書かれたスクリプトが好きで、これをjsFiddleでテストしました（多くの感謝）-フォームフィールドに追加のXMLデータを追加する際に問題が発生しました。例として、American Wigeonを選択した場合、追加のXMLデータをFORMフィールドに入力し、送信できるようにします（したがって、「Rare」の値はテキストフィールドに入力されます）。

サンプルテキストをフォームフィールドに取得できますが、選択した追加のXMLデータを取得できません-以下のコード例：

var xml = '<?xml version="1.0" encoding="utf-8" ?><BIRD><Result><name>American 
Wigeon</name><latin>Anas americana</latin><rare>1</rare><id>68</id><breed>0</breed>
<winter>0</winter></Result><Result><name>American Robin</name><latin>Turdus 
migratorius</latin><rare>1</rare><id>255</id><breed>0</breed><winter>0</winter>
</Result></BIRD>';

var $xml = $($.parseXML(xml));

$xml.find('Result').each(function() {
var data={}
$(this).children().each(function() {
    data[this.tagName]=$(this).text();
})
                                                                                              $('#test').data( data.id,  data).append('<option                                                                           value="'+data.id+'">'+data.name+'</option>');
  });


 $('#test').change(function(){
var data=$(this).data( $(this).val());   

var input = $( "#test2" ); // **this being the name of my text field**
 input.val( input.val() + "more text" );



    alert('ID:'+data.id +', Name:'+ data.name);    
  })

スクリプトが実行されると、オプションから鳥を選択します。これにより、期待どおりにアラートボックスが表示され、テキストフィールドに挿入されたPLUSは「Moretext」です（これを使用して、何かが追加されていることを確認します）。

私は" +data.id + "の使い方に固執し、それを＃test2に入れます。これが私が見逃しているような単純なことである場合は、すべての人の助けと謝罪に感謝します。

4

2 に答える 2

1

以下は、XMLを動的に解析し、jQuery data（）を使用してselect要素に格納されるオプションとデータオブジェクトの両方を作成します。

var $xml = $($.parseXML(xml));

$xml.find('Result').each(function() {
    var data={};
    /* loop over children of each "Result to create data object*/
    $(this).children().each(function() {
        data[this.tagName]=$(this).text();
    });
    /* add data to select and create option*/
    $('#test').data( data.id , data).append('<option value="'+data.id+'">'+data.name+'</option>');
});

/* change handler for select*/
$('#test').change(function(){
    var data=$(this).data( $(this).val()); 
    /* here you would make updates to other fields */   
     alert('ID:'+data.id +', Name:'+ data.name);    
})

デモ：http：//jsfiddle.net/dpK7x/1/

于 2012-06-06T03:31:35.193 に答える
0

jQuery.parseXML()実際の解析を行うために使用していると思います。次に、次のようなことを行うことができます（もちろんDOMReady関数でラップします）。

var xmlDoc = $.parseXML(yourXML),
$xml = $( xmlDoc );

$xml.find('Result').each(function () {
    $this = $(this); // $this is now the <Result> node
    // Assuming you populating a <select> list
    var newOption = $('<option/>').text($this.find('name').text()).val($this.find('name').text());
    // Populate the additional data that we'll be able to use elsewhere
    newOption.data('latin', $this.find('latin').text());
    newOption.data('rare', $this.find('rare').text());
    // etc...

    // Add the newOption to your existing <select> element
    $('#mySelectList').append(newOption);
});

// Then later on we can deal with the <option> being selected
$('#mySelectList').on('change', function() {
    $selected = $(this).find('option:selected');
    // Do whatever you need to do with the data... Update HTML, populate form fields etc.
    console.log('name', $selected.text());
    console.log('latin', $selected.data('latin');
    console.log('rare', $selected.data('rare');
    // etc...
});
于 2012-06-06T02:26:56.877 に答える