1

XMLファイルから入力する必要のあるドロップダウンメニューがあります。これが私が使おうとしているスクリプトです：

 $(document).ready(function(){       // load jQuery 1.5
  function loadfail(){
  alert("Error: Failed to read file!");
 }

 function parse(document){
 $(document).find("menuItem").each(function(){
    var optionLabel = $(this).find('text').text();
    var optionValue = $(this).find('value').text();
    $('.opening').append(
   '<option value="'+ optionValue + '">' + optionLabel + '</option>'
    );
 });
 }

 $.ajax({
  url: 'http://ourwebserver/Online%20App/jobTitles.xml',    // name of file with our data - link has been renamed
  dataType: 'xml',    // type of file we will be reading
  success: parse,     // name of function to call when done reading file
  error: loadfail     // name of function to call when failed to read
 });
});

xmlファイルのサンプルを次に示します。

<menu>
<menuItem>
    <value>612</value>
    <text>CLERK-CMH HOS HIM</text>
</menuItem>
<menuItem>
    <value>1632</value>
    <text>FAM PRACT-CMH CLN Southside Medical</text>
</menuItem>

そして、これが私が入力しようとしているドロップダウンを含むhtmlコードです：

 <strong>Position(s) Desired</strong>
             <select name="opening" size="5" multiple="multiple" id="opening">
      </select>

エラーメッセージは表示されませんが、メニューに入力するデータも表示されません。

また、このリンクでコード/ソリューションを試しまし た。ドロップダウンメニューにxmlファイル を入力すると、同様の結果が得られ、エラーは発生しませんでしたが、データは発生しませんでした。

よろしくお願いします。

4

5 に答える 5

0

document解析で実際に何が設定されているかを確認してください。HTMLと衝突している可能性がありますdocument。

function parse(document){
   console.log(document)
   $(document).find("menuItem").each(function(){
于 2013-02-19T19:37:52.497 に答える
0

成功コールバックで関数を間違って呼び出していると思います。

success: parse,

このようなものでなければなりません。

success: function(){parse(data);},

しかし、私はここであまり経験がないので、私は間違っている可能性があります。

于 2013-02-19T19:34:40.593 に答える
0

要素を見つけるために.opening、ID（）ではなくクラスセレクター（）を使用しています。関数での使用は期待どおりに機能するはずです。#opening<select>$('#opening')parse

于 2013-02-19T19:59:45.887 に答える
0

jQuerydocsはあなたの親友ですhttp://api.jquery.com/jQuery.ajax/

于 2013-02-19T20:07:05.397 に答える
0 
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title></title>
<style>
    body
    {
        width: 610px;
        font-family: calibri;
    }

    .frmDronpDown
    {
        border: 1px solid #7ddaff;
        background-color: #C8EEFD;
        margin: 2px 0px;
        padding: 40px;
        border-radius: 4px;
    }

    .demoInputBox
    {
        padding: 10px;
        border: #bdbdbd 1px solid;
        border-radius: 4px;
        background-color: #FFF;
        width: 50%;
    }

    .row
    {
        padding-bottom: 15px;
    }
</style>

<!--  <script src="jquery-3.2.1.min.js" type="text/javascript"></script>-->
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#divEnvironment").hide();
        $("#divService").hide();
        $("#divButton").hide();
        getDropDownValue(document.getElementById('sor-list'), '', 'sorid', 
         '');
    });

    function getEnvironment(val) {
        if (val != 0) {
            $("#divEnvironment").show();
            $("#divService").hide();
            $("#divButton").hide();
        }
        else {
            $("#divEnvironment").hide();
            $("#divService").hide();
            $("#divButton").hide();
        }
        $('#environment-list option').remove();
        $('#service-list option').remove();
        $('#service-list').append("<option class='ddindent' value='0'>Please 
       Select</option>");
        getDropDownValue(document.getElementById('environment-list'), 
       'sorid', 'envid', val);
    }

    function getService(val) {
        if (val != 0) {
            $("#divEnvironment").show();
            $("#divService").show();
            $("#divButton").hide();
        }
        else {
            $("#divService").hide();
            $("#divButton").hide();
        }
        $('#service-list option').remove();
        getDropDownValue(document.getElementById('service-list'), 'envid', 
        'servid', val);
    }

    function getSubmit(val) {
        if (val != 0) {
            $("#divButton").show();
        }
        else {
            $("#divButton").hide();
        }
    }
    function getDropDownValue(dropdown, id1, id2, val) {
        $.ajax({
            type: "GET",
            url: "make.xml",
            dataType: "xml",
            success: function (xml) {
                var selectCity = $('#' + dropdown.id);
                selectCity.append("<option class='ddindent' value='0'>Please 
            Select</option>");
                $(xml).find('dropdown').each(function () {
                    $(this).find(dropdown.name).each(function () {
                        if (val != '') {
                            if ($(this).attr(id1) == val) {
                                var value = $(this).attr(id2);
                                var label = $(this).text();
                                selectCity.append("<option class='ddindent' 
         value='" + value + "'>" + label + "</option>");
                            }
                        }
                        else {
                            var value = $(this).attr(id2);
                            var label = $(this).text();
                            selectCity.append("<option class='ddindent' 
        value='" + value + "'>" + label + "</option>");
                        }
                    });
                });
            } //sucess close
        });
    }


</script>
  </head>
 <body>
<div class="frmDronpDown">
    <div class="row">
        <label>SOR:</label><br />
        <select name="sor"
            id="sor-list" class="demoInputBox"
            onchange="getEnvironment(this.value);">
        </select>
    </div>
    <div class="row" id="divEnvironment">
        <label>Environment:</label><br />
        <select name="environment"
            id="environment-list" class="demoInputBox"
            onchange="getService(this.value);">
            <option value="">Select Enviroment</option>
        </select>
    </div>
    <div class="row" id="divService">
        <label>Service:</label><br />
        <select name="service" multiple
            id="service-list" class="demoInputBox" 
       onchange="getSubmit(this.value);">
            <option value="">Select Service</option>
        </select>
    </div>
    <div class="row" id="divButton">
        <label></label>
        <br />
        <button type="button" id="btnSubmit" style="padding: 10px; width: 
       100px;">Submit</button>
    </div>
  </div>
 </body>
 </html>      

 <dropdown>
  <sor sorid="1">sor1</sor>
  <sor sorid="2">sor2</sor>
  <environment envid="1" sorid="1">environment1</environment>
  <environment envid="2" sorid="1">environment2</environment>
  <environment envid="3" sorid="2">environment3</environment>
  <environment envid="4" sorid="2">environment4</environment>
  <service servid="11" envid="1">service11</service>
  <service servid="12" envid="1">service12</service>
  <service servid="21" envid="2">service21</service>
  <service servid="22" envid="3">service22</service>
  </dropdown>
于 2019-02-22T09:17:50.043 に答える