1

フォームを作成し、iframe 内に入力要素を表示するために使用しているコードがいくつかあります。Ignite UI を使用しています。このリンクを前提として使用しました。

フレーム内のフォームからスパン要素を取得するにはどうすればよいですか。

ここに私のHTMLがあります：

<html>
<head>
  <script src="http://igniteui.com/js/modernizr.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
  <script>
    $(function() {
      var dsCountry, dsCascTowns, dsCountryCascading,
        dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

      dsCountry = [{
        txtCountry: "3Delta Level 3",
        valCountry: "Ta"
      }, {
        txtCountry: "Account Updater",
        valCountry: "Au"
      }, {
        txtCountry: "DCC",
        valCountry: "Dc"
      }];

      dsCascDistrict = [{
        keyCountry: "Ta",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Ta",
        txtDistrict: "3336",
        valDistrict: "3336"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6064",
        valDistrict: "6064"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6980",
        valDistrict: "6980"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6081",
        valDistrict: "6081"
      }, {
        keyCountry: "Au",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Au",
        txtDistrict: "3345",
        valDistrict: "3345"
      }, {
        keyCountry: "Au",
        txtDistrict: "3346",
        valDistrict: "3346"
      }, {
        keyCountry: "Au",
        txtDistrict: "6214",
        valDistrict: "6214"
      }, {
        keyCountry: "Dc",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Dc",
        txtDistrict: "40",
        valDistrict: "40"
      }];

      dsCascTowns = [{
        keyDistrict: "NJ",
        textTown: "Atlantic City",
        valTown: "AtlanticCity"
      }, {
        keyDistrict: "NJ",
        textTown: "Dover",
        valTown: "Dover"
      }, {
        keyDistrict: "CA",
        textTown: "Los Angeles",
        valTown: "LosAngeles"
      }, {
        keyDistrict: "CA",
        textTown: "San Francisco",
        valTown: "San Francisco"
      }, {
        keyDistrict: "CA",
        textTown: "San Diego",
        valTown: "SanDiego"
      }, {
        keyDistrict: "IL",
        textTown: "Chicago",
        valTown: "Chicago"
      }, {
        keyDistrict: "NY",
        textTown: "New York",
        valTown: "NewYork"
      }, {
        keyDistrict: "NY",
        textTown: "Buffalo",
        valTown: "Buffalo"
      }, {
        keyDistrict: "FL",
        textTown: "Miami",
        valTown: " Miami"
      }, {
        keyDistrict: "FL",
        textTown: "Orlando",
        valTown: "Orlando"
      }, {
        keyDistrict: "SA",
        textTown: "Sofia",
        valTown: "Sofia"
      }, {
        keyDistrict: "SA",
        textTown: "Pernik",
        valTown: "Pernik"
      }, {
        keyDistrict: "PV",
        textTown: "Plovdiv",
        valTown: "Plovdiv"
      }, {
        keyDistrict: "PV",
        textTown: "Asenovgrad",
        valTown: "Asenovgrad"
      }, {
        keyDistrict: "V",
        textTown: "Varna",
        valTown: "Varna"
      }, {
        keyDistrict: "V",
        textTown: "Kavarna",
        valTown: "Kavarna"
      }, {
        keyDistrict: "V",
        textTown: "Balchik",
        valTown: "Balchik"
      }, {
        keyDistrict: "Y",
        textTown: "Yambol",
        valTown: "Yambol"
      }, {
        keyDistrict: "Y",
        textTown: "Kermen",
        valTown: "Kermen"
      }, {
        keyDistrict: "Y",
        textTown: "Elhovo",
        valTown: "Elhovo"
      }, {
        keyDistrict: "Y",
        textTown: "Bolyarovo",
        valTown: "Bolqrovo"
      }, ];

      $(function() {

        $("#comboCountry").igCombo({
          textKey: "txtCountry",
          valueKey: "valCountry",
          dataSource: dsCountry,
          selectionChanged: function(evt, ui) {
            var filteredCascDistrict = [];
            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;
              if (itemData.valCountry == "US") {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              } else {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              }

              filteredCascDistrict = dsCascDistrict.filter(function(district) {
                return district.keyCountry == itemData.valCountry;
              });
            }

            var $comboDistrict = $("#comboDistrict");
            $comboDistrict.igCombo("deselectAll", {}, true);
            $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
            $comboDistrict.igCombo("dataBind");

            var disableChildCombo = filteredCascDistrict.length == 0;
            $comboDistrict.igCombo("option", "disabled", disableChildCombo);
          },
          itemsRendered: function(evt, ui) {
            ui.owner.deselectAll();
          }
        });

        $("#comboDistrict").igCombo({
          valueKey: "valDistrict",
          textKey: "txtDistrict",
          dataSource: [],
          disabled: true,
          filteringCondition: "startsWith",
          multiSelection: {
            enabled: true
          },
          selectionChanged: function(evt, ui) {
            var filteredCascTown = [];

            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;

              var filteredCascTown = dsCascTowns.filter(function(town) {
                return town.keyDistrict == itemData.valDistrict;
              });
            }

            var $comboTown = $("#comboTown");
            $comboTown.igCombo("deselectAll");
            $comboTown.igCombo("option", "dataSource", filteredCascTown);
            $comboTown.igCombo("dataBind");

            var disableChildCombo = filteredCascTown.length == 0;
            $comboTown.igCombo("option", "disabled", disableChildCombo);
          }
        });

        $("#comboTown").igCombo({
          valueKey: "valTown",
          textKey: "textTown",
          disabled: true
        });
      });
    });
  </script>
</head>

<body>
  <div class="group-container overHidden" id="before">
    <IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
    <form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
      <div class="overHidden">
        <div class="comboGroup">
          <div>Product</div>
          <span id="comboCountry"></span>
        </div>
        <div class="comboGroup2">
          <div id="state">
            <br />
          </div>
          <div id="district">ChargeType</div>
          <span id="comboDistrict"></span>
        </div>
        <!-- <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div> -->
      </div>
      <br>
      <br>
      <INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
    </form>
    <!-- frame goes here -->
  </div>
  <div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
  <!-- Some Content After the form. -->
  <script language="JavaScript">
    function _submit_form() {
      /* document.getElementById('before').style.display = 'none'; */
      document.getElementById('after').style.display = 'block';
      var text1 = $('.comboGroup2 -span').text();
      /*  var text2 = document.getElementById('comboDistrict').text();	*/
      document.getElementById("after").innerHTML = "Your Product is " + text1 + " " + "! How are you today?"; /* text2 + */

      return true
    }
  </script>
</body>

</html>

助けてください。選択した商品がフレームに表示されません。

4

1 に答える 1

0

メソッドigComboを使用して、選択した値を取得できます。value

var value = $("#state").igCombo("value");
$("#after").text("Your Product is " + value + " ! How are you today?");

ただし、iframe に要素が表示されません。

于 2017-01-06T08:57:08.583 に答える